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 算法的优势

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。