Vue3 中的编译优化的方式

标记动态节点

标记动态节点之后，在后续渲染器更新阶段旧可以直接基于动态节点集合，实现对动态节点的 靶向更新 或 定向更新.

patchFlag 属性

在编译器进行编译时，如果判断当前节点是属于 动态节点，就会为这个 vnode 节点打上 patchFlag 标记，也就是添加一个 patchFlag 属性，并且 patchFlag 属性 对应的 数值 代表了当前这个 动态节点的类型，如：

• 数字 1：代表该节点是 动态 的 textContent
• 数字 2：代表该节点是 动态 的 calss 绑定
• 数字 3：代表该节点是 动态 的 style 绑定
• ...

dynamicChildren 属性

dynamicChildren 属性 值对应的是一个数组，其中保存的就是带有 patchFlag 属性 的 vnode 节点，并且带有 dynamicChildren 属性 的 vnode 节点成称为 块，即 Block.

Block 节点

一个 Block 本质上也是一个 虚拟 DOM 节点，只不过它比普通的虚拟节点多了一个用于 存储动态子节点 的 dynamicChildren 属性.

一个 Block 不仅能够收集它的 直接动态子节点，也能收集所有 动态的子代节点，而后续渲染器的更新操作将以 Block 作为更新维度去处理.

什么样的节点会变成 Block 节点？

• 所有模板的 根节点
• 带有 v-if 指令的节点
• 带有 v-for 指令的节点
• 模板中 Frament 节点所包裹的 多根节点

其中 v-if 和 v-for 指令会导致 更新前后模板结构不稳定，不过由于 v-for 指令渲染的是一组子节点，为了更好的表示这一组子节点，就需要使用 Fragment 节点来表达 v-for 指令的渲染结果，并将其作为 Block 节点.

静态提升

静态提升的目的是尽可能减少更新时创建 虚拟 DOM 带来的 性能开销 和 内存占用.

没有静态提升时带来的问题

通常，在响应式数据发生变化时，渲染函数就会重新执行，并产生新的虚拟 DOM 节点，显然纯静态的虚拟节点完全没有必要重新创建，这会带来一定的性能开销.

解决方案

在编译阶段可以 将纯静态节点提升到渲染函数外部，在渲染函数内部保持对静态节点的引用即可，当响应式数据变化引起渲染函数重新执行时，并不会重新创建静态的虚拟节点，这样旧可以避免重复创建静态节点的虚拟 DOM 带来的性能开销.

值得注意的是，静态提升是以树为单位的，毕竟不可能会为每一个小的静态节点进行静态提升，这会导致渲染函数外部对应存储静态节点的变量增多，这也会 占用一定的内存.

预字符串化

基于 静态提升 可以继续采用 预字符串化 的优化手段，即直接将原本需要以树为单位进行静态提升的内容，直接转换为对应基于 DOM 操作的 字符串形式.

预字符串化的优势如下：

• 大块的静态内容可以直接通过 innerHTML 进行设置，在 初始化渲染 时具有一定的性能优势
• 减少创建虚拟节点产生开销的性能
• 减少内存占用

缓存内联事件处理函数

不缓存内联事件函数带来的问题

在模板事件处理函数中，为了一些简单的更新操作，通常会在模板中编写 内联的事件处理函数，例如：

<Comp @change="c = a + b">  ===>  function render(ctx){
                                     return h(Com, {
                                        // 内联事件处理函数
                                        onChange: () => ctx.c = ctx.a + ctx.b
                                     })
                                  }
复制代码