你知道 Vue3 中的编译优化吗？

前言

相比于 Vue2，Vue3 通过进行各种编译优化，极大的提升了 Vue 的整体性能，这也使得 Vue3 在编译和更新阶段获得了更快的速度提升！

接下来我们一起看看吧！

编译优化

是什么？

编译优化 指的是编译器将 模板（template） 编译为 渲染函数（render） 的过程中，尽可能的 提取关键信息，以达到 生成最优代码 的过程。

为什么需要？

传统的 Diff 算法会存在很多无意义的对比操作

在对比 新旧 两颗 虚拟 DOM 时，总是要按照 虚拟 DOM 的 层级结构 "一层一层" 进行遍历，然后其中某些内容的遍历对比是完全没必要的，例如：

<div id="foo">
    <p class="bar">{{ text }}</p>
</div>

其中唯一可能变化的就是 <p> 标签中的 text 值，当响应式数据 text 发生修改时，最高效的更新方式就是直接更新 <p> 标签对应的文本内容，然而对于 传统 Diff 算法 而言，会先根据 render 函数生成 新的虚拟 DOM，然后再对比 新旧虚拟 DOM 的方式：

• 对比 div 节点，以及该节点的属性和子节点
• 对比 p 节点，以及该节点的属性和子节点

• 对比 p 节点的文本节点，发现文本节点发生变化，于是更新文本节点

  编译思路

  Vue.js3 编译优化的思路来源就是，跳过这些无意义的对操作，进一步的提升 Vue 中 Diff 算法的对比性能：

• 模板的结构相对稳定，在编译阶段尽可能提取关键信息（如：标记静态节点、动态节点）

• 基于关键信息，通过编译器直接生成对应的原生 DOM 操作代码，减少生成 虚拟 DOM 的性能消耗，有利于提升初始化渲染的速度

  实验性的新编译策略

  

从理论上来看，某些情况下确实并不需要 虚拟 DOM，（即 No Virtual DOM），但在 Vue.js3 中仍然选择保留虚拟 DOM，并承受其带来的性能开销，主要是考虑到 渲染函数的灵活性 和 Vue.js2 的兼容性 问题.

感兴趣可以去了解下，未来 Vue 会提供的一些新特性，不过这并不是本文的核心内容，State of Vue 2022-尤雨溪

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
                                     })
                                  }

显然，当 render 函数被重新执行时，都为会 Comp 组件创建一个全新的 props 对象，并且其中的 onChange 事件也是一个全新的函数，这会导致渲染器对 Comp 组件进行更新，造成额外的性能开销。

解决方案

通过为 render 渲染函数传递第二个参数 cache 数组，且这个 cache 数组是来自于组件实例的，因此可以将内联事件处理函数添加到 cache 数组中缓存起来.

当渲染函数重新执行时并创建虚拟 DOM 时，优先从缓存中读取对应的事件处理函数，避免事件处理函数被重新创建，导致 Comp 组件进行无用更新.

v-once 缓存虚拟 DOM

Vue.js2 和 Vue.js3 中都支持 v-once 指令，当前编译器遇到 v-once 指令时，会利用上面提到的 cache 数组来缓存渲染函数的全部或部分执行结果.

v-once 的优势

• 避免组件更新时重新创建虚拟 DOM 带来的性能开销，因为虚拟 DOM 被缓存了，因此更新时无需重新创建
• 避免无用的 Diff 开销，这是因为被 v-once 标记的虚拟 DOM 树会被父级 Block 节点收集

最后

以上就是本文的全部内容，希望对你所有帮助！！！

本文参与了SegmentFault 思否写作挑战赛，欢迎正在阅读的你也加入。