Vue3 的 SFC 编译优化之 Block 和 PatchFlag 协同工作原理

描述
Vue3 的 SFC（单文件组件）编译过程中，通过 Block 和 PatchFlag 的协同工作实现靶向更新，避免全量对比虚拟 DOM。Block 用于标记动态子树，PatchFlag 则标识动态节点的具体变更类型（如文本、类名、属性等）。两者结合可精确更新动态内容，显著提升性能。

解题过程

1. PatchFlag 的作用

   • 在编译阶段，编译器会分析模板中的动态绑定（如 {{ text }}、:class、@click），为每个动态节点分配一个 PatchFlag。
   • PatchFlag 是二进制枚举值，例如：
     • 1：文本动态（如 {{ text }}）
     • 2：类名动态（如 :class）
     • 4：属性动态（如 :id）
   • 多个标记可通过位运算合并（如 1 | 2 表示文本和类名均动态）。

2. Block 的划分逻辑

   • 每个模板的根节点会形成一个 根 Block。
   • 遇到结构性指令（如 v-if、v-for）时，会创建嵌套的 子 Block，因为这类指令会改变节点结构。
   • 例如：

     <div> <!-- 根 Block -->
       <span>{{ text }}</span>  <!-- 动态节点，PatchFlag=1 -->
       <div v-if="show">  <!-- 子 Block（因 v-if 产生） -->
         <p :class="cls"></p>  <!-- 动态节点，PatchFlag=2 -->
       </div>
     </div>
     

   • Block 会收集其内部的所有动态子节点（包括嵌套子 Block 中的节点），形成一个扁平化的动态节点数组。

3. 协同更新流程

   • 编译阶段：
     • 编译器为每个动态节点添加 patchFlag 属性，并为 Block 节点添加 dynamicChildren 数组，存储动态子节点引用。
     • 上述示例生成的根 Block 的 dynamicChildren 会包含 <span> 和 <p> 的引用。
   • 运行时更新：
     • 当响应式数据变化时，渲染器直接遍历 Block 的 dynamicChildren，仅对比动态节点。
     • 对比每个动态节点时，根据其 patchFlag 执行针对性更新：
       • 若 patchFlag 包含 1，则只更新文本内容；
       • 若包含 2，则只比对并更新类名。
     • 静态节点被完全跳过，无需比对。

4. 性能优势

   • 时间复杂度优化：传统 Diff 算法需递归遍历整个虚拟 DOM 树（O(n³) 优化后通常为 O(n)），而 Block 树将对比范围缩小到动态节点，复杂度降至 O(动态节点数)。
   • 减少递归开销：通过扁平化的 dynamicChildren 直接遍历动态节点，避免深层树递归。

总结
Block 和 PatchFlag 的协同机制将模板的动态性在编译阶段显式化，运行时通过靶向更新避免无效对比。这种设计体现了 Vue3 “编译时优化 + 运行时减负” 的核心思想，是框架性能突破的关键。