[JavaScript知识库]Vue3对比Vue2的效率提升

静态提升

当节点为普通元素节点且没有绑定动态内容时，将会被提升

// 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,有了这个以后，当进行对比的时候仅会对比内容，其余属性事件都将不在对比，大大提升效率