vue3的diff算法的优化在哪

Vue 3 的 Diff 算法在 Vue 2 的基础上进行了全面重构和优化 ，核心改进集中在编译时静态分析 和运行时双端 Diff 的算法升级两大方向。这些优化让 Vue 3 在大型列表渲染和频繁更新的场景下性能大幅提升。

一、编译时优化：从"全量比对"到"跳过静态节点"

Vue 3 引入了静态提升 和Block Tree，让 Diff 算法在编译阶段就标记出"不会变化"的部分，运行时直接跳过。

1. 静态提升（Static Hoisting）

Vue 2 中，每次重新渲染都会重新创建所有 VNode（虚拟节点）并进行 Diff。

Vue 3 则将静态节点 （不依赖响应式数据的节点）提升到渲染函数外部，只创建一次，复用多次。

<!-- 模板 -->
<div>
  <p>静态文本</p>
  <p>{{ dynamic }}</p>
</div>

• Vue 2 ：每次更新都会重新创建两个 <p> 的 VNode。

• Vue 3 ：第一个 <p> 被标记为静态，只创建一次，后续更新直接复用，Diff 时直接跳过。

2. Block Tree 与 Patch Flags

Vue 3 将模板编译为嵌套的 Block（动态节点集合） ，每个 Block 会收集其内部所有动态节点 （如绑定 v-for、{``{}}、v-if 的节点）。

• Patch Flags ：在编译时为每个动态节点标记"更新类型"，如 TEXT（文本变化）、CLASS（类变化）、STYLE（样式变化）。

• Diff 时 ：只遍历 Block 中的动态节点，且只对比标记的特定属性，不再遍历整棵树，大幅减少比对量。

// 编译后的 VNode 示例
{
  type: 'p',
  children: '动态文本',
  patchFlag: 1 // 1 表示 TEXT 类型，只检查文本变化
}

二、运行时 Diff 算法优化：从"双端比较"到"最长递增子序列"

Vue 2 使用双端比较 策略，通过四个指针（头尾相互比较）来尽可能复用 DOM 节点。

Vue 3 在保留双端比较的基础上，针对乱序情况 引入了最长递增子序列（Longest Increasing Subsequence, LIS） 算法，极大减少了 DOM 移动次数。

核心场景：列表重排序

假设旧列表为 [a, b, c, d, e]，新列表为 [a, c, e, b, d]。

• Vue 2 的双端比较：会进行多次移动操作，最终将节点调整到正确位置。

• Vue 3 的 LIS 优化：

  1. 先通过 key 找到新旧节点的映射关系。

  2. 计算新列表中需要移动的最小节点集合（即最长递增子序列）。

  3. 只移动不在递增子序列中的节点，其余节点保持不动。

在上述例子中，最长递增子序列是 [a, c, e]（索引 [0, 2, 4]），Vue 3 只会移动 b 和 d，而 a, c, e 保持原位，移动次数从 3-4 次降为 2 次。

三、其他关键优化点

优化项	Vue 2	Vue 3
事件缓存	每次重新渲染都会重新生成内联函数	缓存事件处理函数，复用同一引用
Fragment 支持	不支持多根节点，必须包裹	支持多根节点，内部自动生成 Block
静态 Props 提升	所有 props 都参与 Diff	静态 props（如 id="fixed"）被提升，跳过 Diff
更快的 VNode 创建	使用 new VNode() 构造函数	使用 createVNode 函数，性能提升约 2 倍

---

性能提升数据

官方 benchmark 显示，Vue 3 的 Diff 性能在以下场景有显著提升：

• 列表更新（带 key） ：提升约 50%~100%

• 静态内容渲染 ：提升约 200%~300%（得益于静态提升）

• 内存占用 ：减少约 30%~50%

​​​​​​​总结：优化的核心思想

Vue 3 的 Diff 优化可以用一句话概括："编译时多标记，运行时少比对"。

• 编译时：通过静态提升、Block Tree、Patch Flags 提前标记"哪些会变、怎么变"。

• 运行时：利用 LIS 算法最小化 DOM 移动次数，结合缓存复用事件和静态 Props。

这些优化让 Vue 3 在处理大型表格、长列表、频繁更新的动画场景时，性能远超 Vue 2。