-
diff算法的优化
-
hoistStatic 静态提升
-
cacheHandlers 事件侦听器缓存
-
ssr渲染
1. diff方法优化
例如:下面的模板包含一个div,div内包含三个段落,其中前两个段落是静态固定不变的,而第三个段落的内容绑定的msg属性,当msg改变的时候,Vue会生成新的虚拟DOM然后和旧的进行对比。
这是段落1
这是段落2
{ {msg}}
vue2中虚拟Dom的所有节点都进行对比。
image
然而模板中div元素是固定不变的,前两个p元素也是固定不变的,可能变化的只是第3个p元素的文本,对所有元素进行对比没有必要。
vue3新增了静态标记(PatchFlag),在创建虚拟DOM的时候,如果节点会发生变化,就会加上静态标记, 然后对比的时候只比较带有Patchflag的节点。
image
Patchflag是个枚举,取值为1代表这个元素的文本是动态绑定的,取值为2代表元素的class是动态绑定的。
export const enum PatchFlags {
TEXT = 1,
CLASS = 1 << 1,
STYLE = 1 << 2,
PROPS = 1 << 3,
FULL_PROPS = 1 << 4,
HYDRATE_EVENTS = 1 << 5,
STABLE_FRAGMENT = 1 << 6,
KEYED_FRAGMENT = 1 << 7,
UNKEYED_FRAGMENT = 1 << 8,
NEED_PATCH = 1 << 9,
DYNAMIC_SLOTS = 1 << 10,
HOISTED = -1,
BAIL = -2
}
2. 静态提升
- vue2中无论元素是否参与更新,每次都会重新创建,然后再渲染。还是以刚才点模板为例,msg每次更新都会创建前两个p节点。
import { createVNode as _createVNode,
toDisplayString as _toDisplayString,
openBlock as _openBlock,
createBlock as _createBlock } from “vue”;
export function render(_ctx, _cache, p r o p s , props, prop