【图解】Vue 2 和 Vue 3 Diff 算法对比！在 Vue 的 Diff 机制中，Vue 2 和 Vue 3 存

大家好，我是前端架构师，关注微信公众号【程序员大卫】：

回复 [面试] ：免费领取“前端面试大全2025(Vue,React等)”
回复 [架构师] ：免费领取“前端精品架构师资料”
回复 [书] ：免费领取“前端精品电子书”
回复 [软件] ：免费领取“Window和Mac精品安装软件”

前言

在 Vue 的 Diff 机制中，Vue 2 和 Vue 3 存在显著的优化差异：

Vue 2 的根节点限制
- Vue 2 每个组件必须有一个根节点，导致额外的 DOM 层级，增加了渲染和 Diff 开销。
- Vue 3 支持 Fragment 片段，允许组件返回多个根节点，减少不必要的 DOM 结构，提高渲染效率。
Vue 2 的传统 Diff 方式
- Vue 2 采用 递归遍历 Virtual DOM 进行逐个比对，即使某些节点没有变化，仍然会重新比对所有子节点，导致额外的计算开销。
Vue 3 的智能 Diff 机制
- Vue 3 通过 Block Tree 和 Patch Flag 仅对关键变动部分进行 Diff，减少不必要的计算。
- 列表 Diff 采用“最长递增子序列”（LIS）优化，尽可能复用已有节点，避免不必要的 DOM 操作，提高 Diff 性能。

本文将对 Vue 2 和 Vue 3 的 Diff 机制进行对比，深入分析它们在 渲染优化、列表 Diff 以及 DOM 操作 方面的不同点。

1. Vue 3 的 Block Tree + Patch Flag 优化

🔹 Vue 2 的问题

在 Vue 2 中，每次更新都会递归遍历整个虚拟 DOM，无论节点是否变化，都会重新比对所有子节点，导致不必要的性能开销。

示例（Vue 2）：

<template>
  <div>
    <span>{{ msg }}</span>
    <p>静态文本</p>  <!-- 这个 p 其实不会变，但 Vue 2 仍然会 diff -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello"
    };
  }
};
</script>

问题：
即使 <p> 这个静态节点没有变化，Vue 2 在每次更新时仍然会重新对比它。

✅ Vue 3 的优化

Vue 3 通过 Block Tree 和 Patch Flag 进行优化：

Block Tree 只追踪动态节点，跳过静态节点，减少遍历量。
Patch Flag 标记哪些属性可能变化，精准更新。

示例（Vue 3）：

<template>
  <div>
    <p>静态文本</p>
    <span :class="count % 2 === 0 ? 'blue' : 'red'">{{ count }}</span>
  </div>
</template>

优化点：

Block Tree 只存 span，跳过 p。
Patch Flag 记录 class 和 text 可能变动。
更新时，Vue 3 只检查 span 的 class 和文本，p 直接跳过。

这种优化大幅减少了不必要的 DOM 遍历和更新，提升了渲染性能。

2. Fragment 片段

🔹 Vue 2 的问题

Vue 2 组件必须有一个根节点，导致额外的 DOM 层级。

示例（Vue 2）：

<template>
  <div> <!-- 额外的 div 只是为了满足 Vue 2 的要求 -->
    <p>第一段</p>
    <p>第二段</p>
  </div>
</template>

问题：
这个额外的 <div> 在 Diff 时会影响性能。

✅ Vue 3 的优化

Vue 3 引入了 Fragment，允许多个根节点，从而减少不必要的 DOM 结构。

示例（Vue 3）：

<template>
  <p>第一段</p>
  <p>第二段</p>
</template>

优化点：

组件可以返回多个根元素。
Diff 时少了一层 <div>，提高了性能。

3. Vue 2 和 Vue 3 列表的 Diff 对比

Vue 2 采用双端对比，Vue 3 采用 最长递增子序列（LIS） 优化，提高了列表更新的效率。

假设节点列表如下：

旧节点列表：A, D, B, C
新节点列表：F, B, C, E, A

Vue2 的 Diff 算法步骤

初始化指针：
• 旧节点指针：oldStart = A (索引0)，oldEnd = C (索引3)
• 新节点指针：newStart = F (索引0)，newEnd = A (索引4)

头尾交叉比较：
• A ≠ F，C ≠ A，A = A（旧头与新尾匹配）。
• 操作：将旧节点 A 移动到末尾，更新指针：

DOM 操作：A 移动到末尾
旧列表剩余：D, B, C
新列表剩余：F, B, C, E

继续比较剩余节点：
• 旧指针：oldStart = D (索引1)，oldEnd = C (索引3)
• 新指针：newStart = F (索引0)，newEnd = E (索引3)
• D ≠ F，C ≠ E，D ≠ E，C ≠ F。
• 操作：发现 F 不在旧列表中，创建新节点 F 并插入到旧头前，更新指针：

DOM 操作：插入 F 到旧头前
旧列表剩余：D, B, C
新列表剩余：B, C, E

继续比较：
• 旧指针：oldStart = D (索引1)，oldEnd = C (索引3)
• 新指针：newStart = B (索引1)，newEnd = E (索引3)
• D ≠ B，C ≠ E，D ≠ E，C ≠ B。
• 操作：在旧列表中找到 B（索引2），将 B 其移动到旧头前，更新指针：

DOM 操作：B 移动到旧头前
旧列表剩余：D, C
新列表剩余：C, E

再次比较：
• 旧指针：oldStart = D (索引1)，oldEnd = C (索引3)
• 新指针：newStart = C (索引2)，newEnd = E (索引3)
• D ≠ C，C ≠ E，D ≠ E，C = C（旧尾与新头匹配）。
• 操作：将旧节点 C 移动到旧头前，更新指针：

DOM 操作：C 移动到旧头前
旧列表剩余：D
新列表剩余：E

处理剩余节点：
• 旧列表剩余 D，新列表剩余 E。

• 操作：创建 E 并插入到旧尾后，删除 D。

DOM 操作：插入 E，删除 D

Vue 3 Diff 过程（基于最长递增子序列）

1. 旧节点列表（oldChildren） vs. 新节点列表（newChildren）

旧列表 (oldChildren)

A  D  B  C

新列表 (newChildren)

F  B  C  E  A

2. 头尾指针对比（双端比较）

Vue 3 先尝试 从头部和尾部跳过相同节点，减少 Diff 范围：

A ≠ F（停止头部对比）
C ≠ A（停止尾部对比）

无法跳过任何节点，需要完整 Diff。

3. 构建旧节点的索引映射

遍历旧列表 A D B C，建立哈希映射：

{
  A: 0,
  D: 1,
  B: 2,
  C: 3
}

4. 遍历新列表，匹配旧索引

遍历 F B C E A，查找在旧列表中的索引：

新节点	旧索引 (映射查找)	变化
F	❌ 不存在	新增
B	✅ 2	复用
C	✅ 3	复用
E	❌ 不存在	新增
A	✅ 0	复用（需要移动）

提取旧索引序列：

[2, 3, 0]

5. 计算最长递增子序列 (LIS)

最长递增子序列（保持相对顺序不变的最长子序列）：

旧索引序列是 [2, 3, 0]
LIS 是 [2, 3]（即 B C 保持不动）
A 需要移动
F 和 E 需要新增

6. 执行 Diff 操作

从右向左遍历 newChildren = [F, B, C, E, A]，进行插入、删除、移动：

为什么是逆序处理？

避免覆盖问题：从后向前处理可以确保新节点的插入位置始终在已处理节点的前面，避免因 DOM 操作导致后续节点位置偏移。
高效复用旧节点：逆序处理时，优先处理新列表末尾的节点（如例子中的 A），这些节点可能位于旧列表的末尾，复用概率更高。

1. 处理 A：

A 在新列表中索引是 4，插入到旧列表索引是 4 的后面，旧列表最大索引为 3，所以就 移动 A 到末尾
A D B C → D B C A

2. 处理 E：

E 在旧列表中不存在，在新列表中索引 3，插入到旧列表索引是 3(C 的索引是3)的后面，所以插入到 C 之后。
旧列表: D B C A
变为: D B C E A

3. 处理 C：

LIS 是 [2, 3]，C 保持不动。

4. 处理 B：

LIS 是 [2, 3]，B 保持不动。

5. 处理 F：

F 在旧列表中不存在，新列表中索引 0。
需要 插入到开头
旧列表: D B C E A
新列表: F D B C E A

6. 处理 D：

旧列表中存在，新列表中不存在
F D B C E A → F B C E A

7. 最终 Diff 结果

F  B  C  E  A

总结

Vue 3 Diff 的优势：

更少的 DOM 操作（6 次 → 4 次）✅
复用最长递增子序列，避免不必要的移动✅
保持最优更新策略，提高性能 ✅

场景	Vue 2 操作次数（完整 Diff）	Vue 3 操作次数（基于 LIS）
移动稳定节点	移动 `A`，`B` 和 `C`（3 次）	仅移动 `A`（1 次）
处理新增节点	插入 `F` 和 `E`（2 次）	插入 `F` 和 `E`（2 次）
处理删除节点	删除 `D`（1 次）	删除 `D`（1 次）
总操作次数	6 次（3 移动 + 2 插入 + 1 删除）	4 次（1 移动 + 2 插入 + 1 删除）