具体优化
TEXT = 1,// --取值是1---表示具有动态textContent的元素
CLASS = 1 << 1, // --取值是2---表示有动态Class的元素
STYLE = 1 << 2, // --取值是4---表示动态样式(静态如style="color: pink",也会提升至动态)
PROPS = 1 << 3, // --取值是8--- 表示具有非类/样式动态道具的元素。
FULL_PROPS = 1 << 4, // --取值是16---表示带有动态键的道具的元素,与上面三种相斥
HYDRATE_EVENTS = 1 << 5, // --取值是32---表示带有事件监听器的元素
STABLE_FRAGMENT = 1 << 6, // --取值是64---表示其子顺序不变,不会改变自顺序的片段。
KEYED_FRAGMENT = 1 << 7, // --取值是128---表示带有键控或部分键控子元素的片段。
UNKEYED_FRAGMENT = 1 << 8, // --取值是256---子节点无key绑定的片段(fragment)
NEED_PATCH = 1 << 9, // --取值是512---表示只需要非属性补丁的元素,例如ref或hooks
DYNAMIC_SLOTS = 1 << 10, // --取值是1024---表示具有动态插槽的元素
一 、diff 算法优化
Vue 2中的虚拟Dom是全量比较
Vue 3新增静态标记(PatchFlag)
在与数据变化后,与上次虚拟DOM节点比较时,只比较带有PatchFlag标记的节点
并且可以从flag信息中得知具体需要比较的内容。
如
vue2中
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>Hello World</div>
<div>{{name}}</div>
vue3中
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_createElementVNode("div", null, "Hello World"),
_createElementVNode("div", null, "Hello World"),
_createElementVNode("div", null, "Hello World"),
_createElementVNode("div", null, "Hello World"),
_createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
], 64 /* text文本在这里标记为1*/))
}
// Check the console for the AST
具体来说:
在vue2.0中对于数据变化后重新渲染的DOM树,会与上次渲染的DOM树逐个比较节点
在vue3.0的diff中,创建虚拟DOM时,会根据该DOM是否会变化而添加静态标记,数据更新需要生成新的虚拟DOM时,只会与上次渲染的且被标记的节点比较。
不同的动态变化类型,为了便于区分,标记的数值也不同
因此在vue3.0中比较次数更少,效率更高,速度更快
二 、hoistStatic 静态提升
vue2.0中,在更新时,元素即使没有变化,也会重新创建进行渲染
vue3.0中,不参与更新的元素;会静态提升,只创建一次下次渲染直接复用。
因此在vue3.0中复用更多,创建次数更少,速度更快。见下方示例:
<div>Hello World 一</div>
<div>Hello World 二</div>
<div>Hello World 三</div>
<div>{{name}}</div>
import { createElementVNode as _createElementVNode, toDisplayString as _toDisplayString, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"
const _hoisted_1 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 一", -1 /* HOISTED */)
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 二", -1 /* HOISTED */)
const _hoisted_3 = /*#__PURE__*/_createElementVNode("div", null, "Hello World 三", -1 /* HOISTED */)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock(_Fragment, null, [
_hoisted_1, /*直接复用 不参与_createElementVNode*/
_hoisted_2, /*直接复用 不参与_createElementVNode*/
_hoisted_3, /*直接复用 不参与_createElementVNode*/
_createElementVNode("div", null, _toDisplayString(_ctx.name), 1 /* TEXT */)
], 64 /* 更新参与重新创建 */))
}
// Check the console for the AST
三、cachehandlers 事件侦听缓存
onClick默认视为动态绑定,因此会追踪它的变化
事件绑定的函数为同一个,因此不追踪它的变化,直接缓存后进行复用
同样的,在编译中进行演示
<button @click='Pooo'>点击</button>
开启时间监听缓存前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("button", { onClick: _ctx.Pooo }, "点击", 8 /* PROPS */, _hoisted_1)
]))
}
开启时间监听缓存后,没有静态标记8,在vue3的diff算法中,只有静态标记才会进行标记,才会追踪
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createElementBlock("div", null, [
_createElementVNode("button", {
onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.Pooo && _ctx.Pooo(...args)))
}, "点击")
]))
}