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

题目描述：
Vue3 在编译阶段通过 Block 和 PatchFlag 的协同机制实现靶向更新。请解释 Block 的作用、PatchFlag 的类型意义，以及二者如何配合在运行时优化 Diff 性能。

解题过程：

1. PatchFlag 的作用与类型

PatchFlag 是编译时给 动态节点 标记的枚举值，用于运行时快速识别需要更新的内容类型。例如：

const PatchFlags = {  
  TEXT: 1,        // 动态文本内容（如 {{ value }}）  
  CLASS: 2,       // 动态 class  
  STYLE: 4,       // 动态 style  
  PROPS: 8,       // 动态属性（非 class/style）  
  FULL_PROPS: 16, // 需全量对比 props  
  HYDRATE_EVENTS: 32, // 服务端渲染相关  
  // ... 其他类型  
};  

示例：

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

编译后生成类似：

const vnode = {  
  type: 'div',  
  props: { class: { active } },  
  children: text,  
  patchFlag: 2 | 1 // CLASS + TEXT  
};  

意义：运行时通过 patchFlag & PatchFlags.TEXT 可快速判断需更新文本内容，避免全量对比。

2. Block 的划分与作用

Block 是一个特殊的虚拟 DOM 节点，用于包裹 包含动态子节点 的区块。

• 动态节点：带有 v-if、v-for 或动态插槽的节点会被标记为 “Block 节点”。
• 稳定性：Block 内部的动态结构变化时，Block 本身保持稳定，只需更新其子节点。

示例：

<div>  
  <span>{{ staticText }}</span>  
  <p v-if="show">{{ dynamicText }}</p>  
</div>  

编译后：

const block = createBlock(/* 包含动态子节点的数组 */);  

作用：

1. 收集所有后代动态节点（如 {{ dynamicText }}）到 block.dynamicChildren 数组。
2. 运行时直接对比 dynamicChildren，跳过静态节点对比。

3. Block 与 PatchFlag 的协同流程

编译阶段：

1. 扫描模板，为动态节点标记 PatchFlag。
2. 遇到动态结构（如 v-if）时，创建 Block 节点，并递归收集其下的动态子节点。

运行时阶段：

1. 更新时，若遇到 Block 节点，直接遍历其 dynamicChildren 进行 PatchFlag 比对。
2. 根据 PatchFlag 按需更新：
   • 若标记为 TEXT，仅更新文本内容；
   • 若标记为 CLASS，仅对比 class 差异。

示例优化效果：

<!-- 静态结构 -->  
<div>  
  <span>静态内容</span>  
  <p :class="dynamicClass">{{ dynamicText }}</p>  
</div>  

• 传统 Diff：对比整个 <div> 及其所有子节点。
• Vue3 优化：
  • Block 收集 dynamicChildren = [p]（仅动态节点）。
  • 对比时直接定位到 <p>，根据其 PatchFlag（CLASS | TEXT）仅更新 class 和文本。

4. 关键设计思想

1. 动静分离：通过 Block 划分动态边界，隔离静态内容。
2. 靶向更新：PatchFlag 将 Diff 粒度从“节点级”细化到“属性级”。
3. 层级扁平化：dynamicChildren 扁平存储动态节点，避免递归遍历整棵树。

性能提升：

• 减少不必要的节点遍历（静态节点完全跳过）。
• 减少属性对比次数（仅检查标记过的属性）。
• 复杂度从 O(n) 优化至接近 O(动态节点数)。

总结：Block 界定动态范围，PatchFlag 明确更新类型，二者协同将 Diff 成本降至最低，实现精准高效的靶向更新。