Vue3 的编译优化之动态节点收集与靶向更新

描述
动态节点收集是 Vue3 编译阶段的核心优化策略之一，它通过编译时的静态分析，在虚拟 DOM 中标记出动态变化的节点（如文本、属性、结构等），并记录其动态类型。在运行时，配合 PatchFlag（补丁标志）实现"靶向更新"——仅更新动态部分，避免全量对比，从而提升性能。

解题过程

1. 编译时分析
   Vue3 的编译器在模板编译阶段，会遍历模板的 AST（抽象语法树），识别出哪些节点或属性是动态的。例如：

   • 使用 {{ }} 的文本插值
   • 使用 v-bind 绑定的属性
   • 使用 v-if 或 v-for 控制的动态结构
     编译器会为每个动态节点分配一个唯一的 PatchFlag（如 1 代表文本动态，8 代表属性动态），并将这些标志合并到虚拟节点的属性中。

2. 生成带标志的虚拟节点
   编译后的渲染函数会生成携带 patchFlag 属性的虚拟节点。例如：

   // 模板: <div :id="id">{{ text }}</div>
   const vnode = {
     type: 'div',
     props: { id: ctx.id },
     children: [ctx.text],
     patchFlag: 9 // 二进制 1 (文本动态) | 8 (属性动态)
   }
   

   patchFlag 使用二进制位掩码表示多种动态类型，便于高效合并与判断。

3. 运行时靶向更新
   当组件更新时，渲染器会检查虚拟节点的 patchFlag：

   • 若 patchFlag 存在，则仅处理该节点标记的动态内容。
   • 例如 patchFlag & 1 为真时，只更新文本内容；patchFlag & 8 为真时，只对比并更新属性。
   • 静态节点或子树会被完全跳过，无需对比。

4. 动态节点收集与 Block 树

   • 对于包含结构性指令（如 v-if、v-for）的节点，Vue3 会将其包装为一个 "Block" 节点。
   • Block 会收集其内部所有动态子节点（包括嵌套 Block）到一个数组中（称为 dynamicChildren）。
   • 更新时，Block 直接遍历 dynamicChildren 数组进行靶向更新，无需递归整棵树。

总结
动态节点收集通过编译时分析 + 运行时标志判断，将传统虚拟 DOM 的树形递归对比优化为扁平化的动态数组更新，大幅减少了不必要的操作。结合 PatchFlag 和 Block 树，Vue3 实现了精确到节点级别的更新粒度，这是其性能优于 Vue2 的关键原因之一。