vue2、vue3区别虚拟dom和Slot性能提升的原理

Vue3核心的 Typescript， Proxy响应式， Composition解决代码反复横跳都有很棒的文章剖析了， 我总结一下虚拟 Dom部分把，并对比一下 React， vdom的重写也是vue3性能如此优秀的重要原因。

Vue3虚拟DOM篇

静态标记， upadte性能提升1.3~2倍， ssr提升2~3倍，怎么做到的呢?


最后一个 _createVNode第四个参数1，只有带这个参数的，才会被真正的追踪，静态节点不需要遍历，这个就是vue3优秀性能的主要来源，再看复杂一点的

<divid="app">
<h1>摸金校尉</h1>
<p>今天天气真不错</p>
<div>{{name}}</div>
<div :class="{red:isRed}">摸金符</div>
<button @click="handleClick">戳我</button>
<inputtype="text"v-model="name">
</div>


解析的结果 在线预览

import{ createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
exportfunction render(_ctx, _cache){
return(_openBlock(), _createBlock("div",{ id:"app"},[
_createVNode("h1",null,"摸金校尉"),
_createVNode("p",null,"今天天气真不错"),
_createVNode("div",null, _toDisplayString(_ctx.name),1/* TEXT */),
_createVNode("div",{
class:{red:_ctx.isRed}
},"摸金符",2/* CLASS */),
_createVNode("button",{ onClick: _ctx.handleClick },"戳我",8/* PROPS */,["onClick"])
]))
}
// Check the console for the AST


_createVNode出第四个参数出现了别的数字，根据后面注释也很容易猜出，根据 text， props等不同的标记，这样再diff的时候，只需要对比 text或者 props，不用再做无畏的 props遍历, 优秀！ 

exportconstenumPatchFlags{
TEXT =1,// 表示具有动态textContent的元素
CLASS =1<<1,// 表示有动态Class的元素
STYLE =1<<2,// 表示动态样式（静态如style="color: red"，也会提升至动态）
PROPS =1<<3,// 表示具有非类/样式动态道具的元素。
FULL_PROPS =1<<4,// 表示带有动态键的道具的元素，与上面三种相斥
HYDRATE_EVENTS =1<<5,// 表示带有事件监听器的元素
STABLE_FRAGMENT =1<<6,// 表示其子顺序不变的片段（没懂）。
KEYED_FRAGMENT =1<<7,// 表示带有键控或部分键控子元素的片段。
UNKEYED_FRAGMENT =1<<8,// 表示带有无key绑定的片段
NEED_PATCH =1<<9,// 表示只需要非属性补丁的元素，例如ref或hooks
DYNAMIC_SLOTS =1<<10,// 表示具有动态插槽的元素
}


如果同时有 props和 text的绑定呢， 位运算组合即可

<divid="app">
<h1>摸金校尉</h1>
<p>今天天气真不错</p>
<div :id="userid"">{{name}}</div>
</div>


import{ createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
exportfunction render(_ctx, _cache){
return(_openBlock(), _createBlock("div",{ id:"app"},[
_createVNode("h1",null,"摸金校尉"),
_createVNode("p",null,"今天天气真不错"),
_createVNode("div",{
id: _ctx.userid,
"\"":""
}, _toDisplayString(_ctx.name),9/* TEXT, PROPS */,["id"])
]))
}
// Check the console for the AST


text是1， props是8，组合在一起就是9，我们可以简单的通过位运算来判定需要做 text和 props的判断, 按位与即可，只要不是0就是需要比较
1、首先还是静态编译时候做的工作，给一个Component打上一个PatchFlag标记---是否是DynamicSlot，这一块的逻辑在compiler-core/src/transforms/transformElement.ts中。
2、遇到有传入slot的组件，它的Children不是普通的vnode数组，而是一个slot function的映射表，这些slot function用于在组件中懒生成slot中的vnodes，如下是一个有传入slot的组件生成的render function。


_createVNode(_component_sub_com, null, {
      // _withCtx使得可以访问父组件的context
      default: _withCtx(() => [
        _createTextVNode(_toDisplayString(_ctx.count), 1 /* TEXT */)
      ]),
      _: 1
    })

3、在子组件的render函数里面，调用相应的slot生成函数，因此这个slot函数里面的属性都会被当前的组件实例所track。

4、以上过程就实现了插槽被正确的组件实例所追踪，最后，关于第一步所打的标记，如果传入的slot是动态slot，那么会在第二步的createVNode函数中传入DynamicSlot的PatchFlag，在虚拟dom的patch过程中，遇到一个组件有DynamicSlot，就和Vue 2.x 一样，随着父组件更新强制更新这个组件。

其实和优化虚拟DOM的原理差不多哦。