温馨提示
该文章距离上次更新已经过去了 1319 天，文章内容可能已经过时。
1、静态提升
在Vue2中，所有元素不管是动态节点还是静态的节点，都会在每一次的渲染中被render函数重新的创建
function render() {
createVNode("p", null, "Hello World")
}
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
1
2
3
2
3
Vue3中，对于静态的节点，会直接用一个变量保存下来，之后的每一次render都会使用这个变量，也就是只要是静态的节点，都只会被创建一次
const _hoisted_1 = createVNode("p", null, "Hello World");
function render() {
_hoisted_1
}
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
静态属性也会被提升
const _hoisted_1 = { class: "user" };
function render() {
createVNode("div", _hoisted_1, "Hello World");
}
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
1
2
3
4
2
3
4
2、预字符串化
当编译器遇到大量连续的静态内容，会直接将其编译成为一个普通字符串节点。
3、缓存事件处理函数
Vue2每一次渲染都会重新创建事件函数，而Vue3会把事件函数缓存下来，下一次渲染都时候会先判断有没有缓存，有的话直接使用缓存。
4、Block Tree
Vue2在对比新旧树的时候，并不知道哪些节点是静态的，哪些是动态的，因此只能一层一层比较，这就浪费了大部分时间在对比静态节点上。
Vue3在创建节点的时候，会用一个数字标记该节点是动态的节点还是静态节点，然后将动态节点提升到根节点中的一个数组，在两树对比的时候就直接遍历根节点中的数组。
5、PatchFlag
Vue2在对比每一个节点时，并不知道这个节点哪些相关信息会发生变化，因此只能将所有信息依次比对。
Vue3会根据在创建节点是记录的数字（1为文本、2为class、3位class+文本），来判断哪些信息是可能变化的。