Vue2与Vue3中diff算法的区别

1. 节点对比策略优化

Vue 2：全量对比（双端比较）

• 采用 双端 Diff 算法（头尾指针双向遍历），通过四种比较方式尝试复用节点：

  1. 旧头 vs 新头

  2. 旧尾 vs 新尾

  3. 旧头 vs 新尾

  4. 旧尾 vs 新头

• 缺点：即使静态内容不变，仍需全量遍历所有节点，效率较低。

Vue 3：静态标记 + 动态追踪

• 编译时优化：通过 PatchFlag 标记动态节点（如 class、style、props 等），Diff 时直接跳过静态节点。

• 动态绑定追踪：仅对比动态变化的节点，减少不必要的遍历。

• 优势：性能提升显著，尤其在大规模静态内容中。

---

2. Fragment 支持

Vue 2：单根节点限制

• 模板必须有一个根节点，多个兄弟节点需要包裹在一个父节点中，导致额外层级。

• Diff 时需处理多余的包装节点。

Vue 3：Fragment（片段）

• 支持多根节点模板，Diff 时会直接对比兄弟节点，减少层级嵌套的开销。

---

3. 事件缓存优化

Vue 2：动态绑定事件

• 每次更新会重新生成事件函数，导致不必要的 Diff 对比。

Vue 3：事件缓存

• 对静态事件（如 @click="handleClick"）进行缓存，复用之前的事件函数，避免重复对比。

---

4. Block Tree 和 Patch Flag

Vue 3 新增概念：

• Block Tree：将动态节点划分为“块”（Block），Diff 时以块为单位更新。

• PatchFlag：在编译阶段标记动态节点的类型（如 1 表示文本变化，2 表示 class 变化），Diff 时直接定位变化点。

// 编译后的 VNode 示例
{
  type: 'div',
  patchFlag: 8, // 表示 PROPS 动态变化
  dynamicProps: ['class']
}

---

5. **性能对比示例

假设一个包含 1000 个静态节点和 1 个动态节点的组件：

• Vue 2：需要遍历 1001 个节点。

• Vue 3：通过 PatchFlag 跳过静态节点，仅对比 1 个动态节点。

---

总结：Vue 3 Diff 算法的优势

优化点	Vue 2	Vue 3
节点对比范围	全量对比	动态追踪（PatchFlag）
多根节点支持	不支持（需包裹）	支持（Fragment）
事件处理	每次重新生成	缓存复用
编译时优化	无	Block Tree + PatchFlag
性能影响	大量静态节点效率低	静态内容几乎零开销