Vue 3 渲染机制的优化

本文内容摘自Vue 3官方文档的渲染机制，详细内容大家可以查看。

虚拟 DOM 在 React 和大多数其他实现中都是纯运行时的：更新算法无法预知新的虚拟 DOM 树会是怎样，因此它总是需要遍历整棵树、比较每个 vnode 上 props 的区别来确保正确性。另外，即使一棵树的某个部分从未改变，还是会在每次重渲染时创建新的 vnode，带来了大量不必要的内存压力。

但实际上我们并不需要这样。在 Vue 中，框架同时控制着编译器和运行时。这使得我们可以为紧密耦合的模板渲染器应用许多编译时优化。编译器可以静态分析模板并在生成的代码中留下标记，使得运行时尽可能地走捷径。与此同时，我们仍旧保留了边界情况时用户想要使用底层渲染函数的能力。我们称这种混合解决方案为带编译时信息的虚拟 DOM。

Vue 编译器用来提高虚拟 DOM 运行时性能的主要优化有：

静态提升

在模板中常常有部分内容是不带任何动态绑定的：

Vue 编译器自动地会提升静态的 vnode 创建函数到这个模板的渲染函数之外，并在每次渲染时都使用这份相同的 vnode，渲染器知道新旧 vnode 在这部分是完全相同的，所以会完全跳过对它们的差异比对。

更新类型标记

对于单个有动态绑定的元素来说，我们可以在编译时推断出大量信息：

在为这些元素生成渲染函数时，Vue 在 vnode 创建调用中直接编码了每个元素所需的更新类型：

最后这个参数 2 就是一个更新类型标记 (patch flag)。运行时渲染器也将会使用位运算来检查这些标记，确定相应的更新操作：

树结构打平

内部结构是稳定的一个部分可被称之为一个区块。

每一个块都会追踪其所有带更新类型标记的后代节点，举例来说：

编译的结果会被打平为一个数组，仅包含所有动态的后代节点：

当这个组件需要重渲染时，只需要遍历这个打平的树而非整棵树。这也就是我们所说的树结构打平，这大大减少了我们在虚拟 DOM 协调时需要遍历的节点数量。模板中任何的静态部分都会被高效地略过。