Vue Diff 算法详解：Vue 2 vs Vue 3

这是一个非常核心且有深度的问题，能够充分考察对 Vue 底层原理的理解。本文将从基础概念到深度实现，全面对比 Vue 2 和 Vue 3 的 Diff 算法差异和优化点。

Diff 算法的核心概念

Vue 中的 Diff 算法是其虚拟 DOM (Virtual DOM) 体系下的核心部分。它的核心目标是最小化真实 DOM 操作，从而提升渲染性能。

当组件状态变更后，Vue 会生成一个新的 VNode 树。Diff 算法的工作就是对比这棵新树和上一次渲染的旧树，找出两棵树之间最少的差异点，然后只将这些差异应用到真实的 DOM 上，而不是粗暴地重新渲染整个页面。

它的一个基本原则是同级比较，不会跨层级移动节点。如果父节点不同，它会直接销毁旧的父节点及其所有子节点，然后创建新的。这是一种策略上的权衡，极大地降低了算法的复杂度。

Vue 2 的双端 Diff 算法

在 Vue 2 中，Diff 的核心是 updateChildren 函数中采用的双端 Diff (Double-Ended Diff) 算法。

这个算法在对比新旧两组子节点时，并不会简单地从头到尾遍历。而是设立了四个指针，分别指向新旧子节点数组的头和尾，然后在一个循环中进行高效的比较：

四种比较策略

1. 头与头比较 (oldStart vs newStart)：如果节点相同，就地 patch，两个头指针向后移动。
2. 尾与尾比较 (oldEnd vs newEnd)：如果节点相同，就地 patch，两个尾指针向前移动。
3. 旧头与新尾比较 (oldStart vs newEnd)：如果节点相同，patch 后将旧头对应的真实 DOM 移动到队尾，旧头指针后移，新尾指针前移。
4. 旧尾与新头比较 (oldEnd vs newStart)：如果节点相同，patch 后将旧尾对应的真实 DOM 移动到队头，旧尾指针前移，新头指针后移。

如果以上四种情况都不匹配，才会使用旧节点的 key 创建一个 Map，去尝试寻找可复用的节点。循环结束后，再统一处理剩余的需要新增或删除的节点。

key 的重要性

key 的重要性在这里体现得淋漓尽致。key 是节点的唯一标识，能让 Diff 算法在上述对比中，特别是乱序场景下，准确地识别出是移动、新增还是删除，从而实现高效的节点复用，避免了状态错乱和不必要的 DOM 销毁与重建。

为什么不能使用 index 作为 key？

好的，这是一个非常好的追问，能直击key这个知识点的核心。作为面试官，问这个问题就是想考察你是否真正理解了key的"身份标识"作用，而不仅仅是背诵了概念。

简短而明确的回答是：

当使用index作为key时，其表现几乎等同于不使用key，实际上触发的仍然是"就地复用"的策略，而不是真正意义上基于key的移动策略。

key的本质作用是"追踪"

首先我们要记住key的核心使命：key是给虚拟DOM节点提供一个稳定不变的"身份证号"。Diff算法依赖这个身份证号来识别一个旧节点是否在新列表中依然存在，从而决定是移动它还是销毁重建。

index作为key的问题

index最大的问题在于它不是稳定的。当数组发生变化时，元素的index也可能会跟着变。

让我们用一个经典的例子来说明：

假设原始数据和DOM是：

• Data: list = [ { id: 'A', name: 'Apple' }, { id: 'B', name: 'Banana' } ]
• VNode with index as key:
  • VNode(key: 0, text: 'Apple')
  • VNode(key: 1, text: 'Banana')
• DOM:
  • <li>Apple <input /></li>
  • <li>Banana <input /></li>

现在，我们在数组开头插入一个新元素：

• New Data: list = [ { id: 'C', name: 'Cherry' }, { id: 'A', name: 'Apple' }, { id: 'B', name: 'Banana' } ]

Vue会生成新的VNode列表：

• New VNode with index as key:
  • VNode(key: 0, text: 'Cherry')
  • VNode(key: 1, text: 'Apple')
  • VNode(key: 2, text: 'Banana')

Diff过程分析

现在我们来看Diff算法会做什么：

1. 比较 key: 0 的节点

   • 旧：VNode(key: 0, text: 'Apple')
   • 新：VNode(key: 0, text: 'Cherry')
   • Diff算法一看，key都是0，它会认为这是同一个节点，只是内容变了。于是它执行就地复用，把第一个<li>的内容从 'Apple' 更新成 'Cherry'。

2. 比较 key: 1 的节点

   • 旧：VNode(key: 1, text: 'Banana')
   • 新：VNode(key: 1, text: 'Apple')
   • Diff算法一看，key都是1，它再次认为这是同一个节点。于是它执行就地复用，把第二个<li>的内容从 'Banana' 更新成 'Apple'。

3. 列表长度变化

   • 旧列表比对完了，新列表还有一个VNode(key: 2, text: 'Banana')。
   • 这是一个全新的节点，于是Vue创建一个新的<li>Banana</li>并插入到DOM末尾。

结论

从上面的过程可以看出，虽然我们提供了:key="index"，但因为index的变化，Diff算法被"误导"了。它没有去移动任何DOM元素，而是采取了和不写key时完全一样的就地更新策略。

这会导致两个严重后果：

1. 性能问题：本该只需要一次DOM插入操作，现在却变成了两次DOM内容更新和一次DOM插入，性能更差。
2. 状态错乱：如果<li>中包含<input>等带有自身状态的元素，那么原本属于'Apple'的input状态会留给'Cherry'，属于'Banana'的input状态会留给'Apple'，导致UI状态和数据不一致，引发Bug。

什么时候可以用index作为key？

当然，在极少数情况下使用index作为key是无害的，主要满足以下两个条件：

1. 列表数据不会被重新排序（不会在头部或中间增删改）。
2. 列表项中不包含任何自身状态（如表单输入、组件的内部data等）。

但为了代码的健壮性和可维护性，最佳实践是始终为列表项提供一个唯一且稳定的key，比如后端返回数据中的id。

总结：

使用index作为key，Vue的更新机制会退化为'就地复用'策略。这不仅无法带来key本应提供的性能优势（比如DOM移动），反而会在列表重排序时引发性能下降和状态错乱的严重问题。因此，它和不使用key在本质上是同一类行为，都应该在开发中极力避免。

Vue 3 的革命性进化

Vue 3 的 Diff 算法则是一次革命性的升级。它最大的变化是与编译器深度结合，实现了编译时优化与运行时算法的完美协同。Vue 2 的 Diff 是纯运行时的。

这个协同策略可以分为两个层面来看：

1. 编译时优化：为运行时 Diff 提供"情报"

Vue 3 的编译器在解析模板时，会进行静态分析，为运行时的 Diff 铺平道路。主要体现在：

静态提升 (Static Hoisting)

对于完全静态、没有动态绑定的内容，会直接提升到 render 函数之外。这意味着它们只被创建一次，在后续渲染中无限次复用，完全跳过 Diff 过程。

补丁标记 (Patch Flags)

这是最核心的优化。编译器会分析出动态节点的具体动态部分，并用一个数字类型的 PatchFlag 来标记它。例如，一个节点如果只有 class 是动态的，就会被打上 CLASS 标记。在运行时，Diff 算法看到这个标记，就只会去对比 class，而完全跳过对其他 props、style 或子节点的比较，实现了靶向更新，极大地减少了不必要的计算。

树结构扁平化 (Block Tree)

编译器会将动态节点收集到一个扁平数组中，构成一个"块 (Block)"。在 Diff 时，算法不再需要递归遍历整棵 VNode 树，只需遍历这个扁平的动态节点数组即可，将树的递归遍历降级为数组的线性遍历，效率更高。

2. 运行时算法：更智能的"最长递增子序列"

得益于编译时的情报，运行时的 Diff 变得更加高效。特别是在处理带 key 的列表子节点时，Vue 3 放弃了双端 Diff，采用了最长递增子序列 (Longest Increasing Subsequence, LIS) 算法。

其流程大致是：

1. 前序/后序预处理：和 Vue 2 类似，先从头和尾同步处理掉没有变化的节点，以尽可能缩小需要处理的乱序部分的范围。

2. 处理乱序节点：

   • 为剩余的新节点列表创建一个 key -> newIndex 的 Map，用于快速查找。
   • 遍历剩余的旧节点，如果在新节点 Map 中找不到，说明该节点已被删除，直接卸载。如果找到了，就 patch 节点，并建立一个记录"旧索引到新索引"的映射关系数组。
   • 应用 LIS 算法：这是算法的精髓。它对上一步生成的"索引映射数组"应用 LIS 算法，找到其中最长的一段保持相对顺序不变的序列。
   • 最小化移动：所有属于这个最长递增子序列的节点，都不需要移动 DOM！ 它们是稳定的"锚点"。算法只需要创建全新的节点，并移动那些不属于 LIS 序列的节点即可。这使得 DOM 的移动操作次数达到了理论上的最小值。

总结与对比

Vue 2 和 Vue 3 Diff 算法的核心区别：

对比维度	Vue 2	Vue 3
核心思想	纯运行时，依赖双端比较进行暴力试探	编译时 + 运行时协同，编译器提供大量优化情报
优化粒度	全量 Diff，即使只有单个属性变化也要完整比较	借助 Patch Flags 实现靶向更新，按需比较
核心算法	处理乱序节点使用双端比较	使用最长递增子序列，实现理论上最小的 DOM 移动次数
遍历方式	递归遍历整棵 VNode 树	遍历扁平的动态节点数组，线性遍历
静态节点	每次都需要进行比较	静态提升，完全跳过 Diff 过程
性能表现	依赖算法优化	从根本上减少 Diff 工作量，性能显著提升

由于编译时优化，Vue 3 从根本上减少了 Diff 的工作量，避免了对静态节点的遍历和比较，因此在大部分场景下，性能都远超 Vue 2。这种设计体现了 Vue 3 在架构层面的深度思考和创新。