Vue3效率的提升
静态提升
当节点为普通元素节点且没有绑定动态内容时,将会被提升
// vue3
const some = createVNode("h1", null, "123456")
render() {
some
}
静态属性也会被提升
<div class="abc"></div>
const some = { class: "abc" }
render() {
createVNode("div", some, "")
}
预字符串化
当遇到大量连续的静态内容,会直接将其编译为一个普通的字符串
<div>logo</div>
<div>tips</div>
<div class="content">content</div>
<div>{{ name }}</div>
const some = createStaticVNode("<div>logo</div><div>tips</div><div class=\"content\">content</div>")
缓存事件处理函数
<button @click="count++">add</button>
render(ctx, cache) {
return createVNode("button", {
onCLick: cache[0] || (cache[0] = ($event) => (ctx.count++))
})
}
Block Tree
Vue2在进行节点对比的时候,由于不知道哪个是动态数据,所以进行了从头到尾的比较。
Vue3编译器在编译的时候对动态数据进行了保存,保存到根节点的一个数组中,这个根节点通常称为Block,当需要对比数据的时候,直接对比该数组,而不是从头到尾比较
PatchFlag
<div>{{ name }}</div>
return (_openBlock(),
_createElementBlock("div", null, _toDisplayString($data.name), 1 /* TEXT */
))
这个动态DIV只有内容时变动的所以有了如下标记
1 /* TEXT */ (标记十分多,没必要记,反正我是懒得要死)
这个就是PatchFlag,有了这个以后,当进行对比的时候仅会对比内容,其余属性事件都将不在对比,大大提升效率