Vue3 的编译优化之动态节点收集与 PatchFlag 协同原理

描述
Vue3 的编译优化通过动态节点收集与 PatchFlag 协同工作，实现靶向更新。在模板编译阶段，编译器会分析模板中的动态部分（如动态属性、动态文本），为每个动态节点标记一个 PatchFlag（补丁标志），并将这些动态节点收集到 Block 中。在更新时，通过 PatchFlag 快速识别节点变化类型，仅对比动态内容，跳过静态节点对比，提升 diff 效率。

解题过程

1. 模板编译阶段：分析动态绑定

   • 编译器解析模板时，会识别动态内容，例如 {{ text }}（动态文本）、:class="cls"（动态属性）、v-if（动态结构）。
   • 对每个动态节点，根据其动态类型（如文本、类名、样式）分配一个唯一的 PatchFlag 值（例如 1 表示文本动态，2 表示类动态）。
   • 示例：

     <div :class="cls">{{ text }}</div>  
     

     编译后，div 节点会标记 PatchFlag 为 3（1 | 2，文本和类动态的按位或组合）。

2. 动态节点收集与 Block 生成

   • 编译器将模板中的根节点、v-if/v-for 包裹的节点定义为 Block（块）。
   • Block 会收集其内部所有动态子节点（包括嵌套动态节点），形成一个 动态节点数组（dynamicChildren）。
   • 静态节点不会被收集到 dynamicChildren 中，更新时直接跳过。
   • 示例：

     <div>  
       <span>{{ a }}</span>  
       <p>静态文本</p>  
       <span>{{ b }}</span>  
     </div>  
     

     编译后，div 作为 Block，其 dynamicChildren 仅包含两个动态 span 节点，静态 p 节点被排除。

3. PatchFlag 在更新阶段的协同作用

   • 当组件更新时，渲染器会对比新旧虚拟 DOM 树。
   • 对于 Block 节点，直接遍历其 dynamicChildren 数组，仅对比动态节点，无需递归遍历整个子树。
   • 根据每个动态节点的 PatchFlag，执行针对性更新：
     • 若 PatchFlag 包含文本动态（1），则仅更新节点的 textContent。
     • 若包含类动态（2），则仅更新 class 属性。
     • 通过按位与运算（如 flag & 1）快速判断更新类型。
   • 示例：
     若上述 div 中 a 的值变化，则直接找到第一个 span 节点，根据其 PatchFlag（1）仅更新文本内容，跳过静态 p 和第二个 span 的对比。

4. 性能优化效果

   • 通过动态节点收集，将 Diff 范围从整棵树缩小到动态节点列表，时间复杂度从 O(n) 降低到 O(动态节点数)。
   • PatchFlag 使更新逻辑精细化，避免无意义的属性或文本对比，减少 JavaScript 执行开销。
   • 结合静态提升（静态节点被提升到渲染函数外）等优化，整体渲染性能显著提升。

总结
动态节点收集与 PatchFlag 的协同是 Vue3 编译优化的核心，通过编译时分析标记动态内容，运行时靶向更新，最小化 Diff 成本，实现了高效的重渲染机制。