🚀 Vue3 源码深度解析：Diff算法的五步优化策略与最长递增子序列的巧妙应用
📚 学习目标
通过本文，你将深入理解：
- 🎯 Vue3 Diff算法的完整五步策略，而非仅仅是最长递增子序列
- 🔧 双端比较算法如何最大化节点复用，减少DOM操作
- ⚡ 最长递增子序列在乱序场景下的核心作用与实现原理
- 🎨 Key值在Diff算法中的关键作用与性能影响
- 💡 从算法设计角度理解Vue3相比Vue2的性能提升
🌟 引言
在前端面试中，"Vue3的Diff算法"是一个高频考点。许多候选人的第一反应是"最长递增子序列"，但这个回答并不完整。
真相是：Vue3的Diff算法是一个精心设计的五步优化策略，最长递增子序列只是其中一个环节。它通过双端比较、增删处理、乱序优化等多个步骤，实现了对DOM操作的最大化优化。
让我们深入源码，揭开Vue3 Diff算法的神秘面纱。
🔬 核心函数：patchKeyedChildren
patchKeyedChildren 是Vue3 Diff算法的核心实现，负责处理带有key的子节点列表的更新。这个函数体现了Vue3团队在性能优化方面的深度思考。
🎯 算法概览
Vue3的Diff算法采用分治策略，将复杂的列表比较问题分解为五个相对简单的子问题：
-
前序比较：处理列表开头的相同节点
-
后序比较：处理列表结尾的相同节点
-
新增处理：挂载新出现的节点
-
删除处理：卸载不再需要的节点
-
乱序处理：使用最长递增子序列优化节点移动
这种设计的巧妙之处在于：大多数实际场景下，列表的变化都集中在前四步，只有少数复杂场景才需要进入第五步。
const patchKeyedChildren = (
c1: VNode[],
c2: VNode[],
container: Element,
parentAnchor: any
) => {
// 📏 初始化指针和长度变量
let newLen = c2.length // 新子节点数组的长度
let oldLen = c1.length - 1 // 旧子节点数组的最后一个索引
let e1 = oldLen // 旧数组的结束指针（从后往前移动）
let e2 = newLen - 1 // 新数组的结束指针（从后往前移动）
let i = 0 // 开始指针（从前往后移动）
// 🔍 第一步：从前往后比较，找出开头相同的节点
// 目的：跳过开头相同的节点，减少后续比较的工作量
// 例如：[A,B,C,D] vs [A,B,X,Y] → 跳过A,B，从C,D vs X,Y开始处理
while (i <= e1 && i <= e2) {
const n1 = c1[i] // 当前旧节点
const n2 = c2[i] // 当前新节点
// 如果节点类型和key都相同，说明可以复用
if (isSameVNodeType(n1, n2)) {
// 递归更新这个节点（可能属性或子节点有变化）
patch(n1, n2, container, parentAnchor)
} else {
// 遇到不同的节点，停止前向比较
break
}
i++ // 指针前移
}
// 🔍 第二步：从后往前比较，找出结尾相同的节点
// 目的：跳过结尾相同的节点，进一步缩小需要处理的范围
// 例如：[A,B,C,D] vs [X,Y,C,D] → 跳过C,D，只需处理A,B vs X,Y
while (i <= e1 && i <= e2) {
const n1 = c1[e1] // 当前旧节点（从后往前）
const n2 = c2[e2] // 当前新节点（从后往前）
// 如果节点类型和key都相同，说明可以复用
if (isSameVNodeType(n1, n2)) {
// 递归更新这个节点
patch(n1, n2, container, parentAnchor)
} else {
// 遇到不同的节点，停止后向比较
break
}
e1-- // 旧数组指针前移
e2-- // 新数组指针前移
}
// 📊 经过前后两轮比较后的状态分析：
// - i: 第一个不同节点的位置
// - e1: 旧数组中最后一个需要处理的节点位置
// - e2: 新数组中最后一个需要处理的节点位置
// ✅ 第三步：处理新增节点的情况
// 条件：i > e1 说明旧节点已经处理完，但新节点还有剩余
// 例如：旧[A,B] 新[A,B,C,D] → 需要新增C,D
if (i > e1) {
if (i <= e2) {
// 确定插入位置的锚点
const nextPos = e2 + 1
// 如果下一个位置存在节点，就插入到它前面；否则插入到容器末尾
const anchor = nextPos < newLen ? c2[nextPos].el : parentAnchor
// 挂载所有新增的节点
while (i <= e2) {
// patch(null, newNode) 表示挂载新节点
patch(null, c2[i], container, anchor)
i++
}
### 🎯 第三部分：最优移动策略与最长递增子序列
这是Vue3 Diff算法最精彩的部分，也是**最长递增子序列**真正发挥作用的地方。当前四步都无法处理时，说明遇到了复杂的乱序场景。
#### 🎯 核心挑战
乱序场景的核心挑战是：**如何用最少的DOM移动操作，将旧列表转换为新列表？**
```typescript
// 典型乱序场景
// 旧列表：[A, B, C, D, E]
// 新列表：[A, C, E, B, D, F]
// 挑战：B和D需要移动，F需要新增，同时要保持C和E的相对位置不变
🧩 三步解决策略
Vue3将这个复杂问题分解为三个子问题：
-
🗺️ 构建映射表：建立新节点key到索引的快速查找表
-
🔍 标记可复用节点：找出哪些旧节点可以复用，哪些需要删除
-
🎯 最优移动策略：使用最长递增子序列计算最少移动方案
🔧 关键数据结构
// newIndexToOldIndexMap: 核心数据结构
// 索引：新列表中的位置
// 值：对应旧列表中的位置 + 1（+1是为了区分0和未找到）
// 例：[3, 1, 4, 0] 表示：
// - 新列表[0] 对应 旧列表[2]
// - 新列表[1] 对应 旧列表[0]
// - 新列表[2] 对应 旧列表[3]
// - 新列表[3] 是新增节点
⚡ 移动检测算法
// 移动检测的巧妙之处
let maxNewIndexSoFar = 0
for (let i = s1; i <= e1; i++) {
const newIndex = keyToNewIndexMap.get(prevChild.key)
if (newIndex >= maxNewIndexSoFar) {
maxNewIndexSoFar = newIndex // 节点位置递增，无需移动
} else {
moved = true // 发现逆序，需要移动
}
}
这个算法的精髓在于：如果新位置总是递增的，说明相对顺序没变，无需移动。
📊 性能优化细节
// 早期退出优化
if (patched >= toBePatched) {
unmount(prevChild)
continue
}
// 这个优化的作用：
// 如果已经处理的节点数量达到新节点总数
// 说明剩余的旧节点都是多余的，直接删除
// 避免不必要的查找和比较操作
🔑 Key值的重要性
// 有key的情况：O(1)查找
if (prevChild.key != null) {
newIndex = keyToNewIndexMap.get(prevChild.key)
}
// 无key的情况：O(n)查找
else {
for (j = s2; j <= e2; j++) {
if (newIndexToOldIndexMap[j - s2] === 0 &&
isSameVNodeType(prevChild, c2[j])) {
newIndex = j
break
}
}
}
这就是为什么Vue强烈建议在v-for中使用key的原因：
- ✅ 有key：时间复杂度O(1)
- ❌ 无key：时间复杂度O(n²)
🎯 最长递增子序列的核心作用
在第三步的移动处理中，最长递增子序列发挥了关键作用：
// 核心执行逻辑
const increasingNewIndexSequence = moved
? getSequence(newIndexToOldIndexMap)
: []
// 示例场景
// 旧列表：[A, B, C, D, E] 索引：[0, 1, 2, 3, 4]
// 新列表：[A, C, E, B, D] 索引：[0, 1, 2, 3, 4]
// newIndexToOldIndexMap: [1, 3, 5, 2, 4] // +1偏移后的值
// 最长递增子序列：[1, 3, 5] 对应节点 [A, C, E]
// 结论：A, C, E 不需要移动，只需移动 B, D
⚡ 移动策略优化
// 逆向遍历的巧妙之处
for (i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i
const nextChild = c2[nextIndex]
const anchor = nextIndex + 1 < newLen ? c2[nextIndex + 1].el : parentAnchor
if (newIndexToOldIndexMap[i] === 0) {
// 新增节点
patch(null, nextChild, container, anchor)
} else if (moved) {
if (j < 0 || i !== increasingNewIndexSequence[j]) {
// 需要移动的节点
container.insertBefore(nextChild.el, anchor)
} else {
j-- // 在最长递增子序列中，不需要移动
}
}
}
为什么要逆向遍历？
- 🎯 保证锚点的正确性：后面的节点位置确定后，前面的节点才能找到正确的插入位置
- ⚡ 减少DOM操作：避免重复的位置计算
🧮 算法复杂度分析
-
时间复杂度：O(n log n) - 最长递增子序列算法
-
空间复杂度：O(n) - 存储序列信息
-
实际效果：将移动操作从O(n²)优化到接近O(n)
}
}
// 🗑️ 第四步：处理删除节点的情况
// 条件：i > e2 说明新节点已经处理完，但旧节点还有剩余
// 例如：旧[A,B,C,D] 新[A,B] → 需要删除C,D
else if (i > e2) {
while (i <= e1) {
// 卸载多余的旧节点
unmount(c1[i])
i++
}
}
// 乱序情况：需要进行复杂的diff算法
// 使用最长递增子序列算法来最小化DOM移动操作
else {
// 🎯 乱序情况的处理：这是Vue3 diff算法最复杂的部分
// 目标：用最少的DOM操作，将旧子节点列表转换为新子节点列表
const s1 = i // 旧子节点数组中需要处理的起始位置
const s2 = i // 新子节点数组中需要处理的起始位置
// 📋 第一步：建立"新节点key → 新节点索引"的快速查找表
// 作用：后面遍历旧节点时，可以快速找到对应的新节点位置
// 例如：新节点 [A, B, C] → Map { 'A': 0, 'B': 1, 'C': 2 }
const keyToNewIndexMap: Map<string | number | symbol, number> = new Map()
for (i = s2; i <= e2; i++) {
const nextChild = c2[i]
if (nextChild.key != null) {
keyToNewIndexMap.set(nextChild.key, i)
}
}
// 🔄 第二步：遍历旧子节点，找出可以复用的节点并记录移动信息
let j
let patched = 0 // 已经处理（patch）的节点数量
const toBePatched = e2 - s2 + 1 // 新子节点中需要处理的总数量
let moved = false // 标记是否有节点需要移动位置
let maxNewIndexSoFar = 0 // 记录到目前为止遇到的最大新索引
// 📊 创建"新节点索引 → 旧节点索引"的映射数组
// 作用：记录每个新节点对应的旧节点位置，用于后续的移动优化
// 值的含义：0 = 全新节点，>0 = 可复用的旧节点索引+1
const newIndexToOldIndexMap = new Array(toBePatched)
for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
// 🔍 遍历所有旧子节点，决定每个节点的命运
for (i = s1; i <= e1; i++) {
const prevChild = c1[i] // 当前处理的旧节点
// ⚡ 性能优化：如果已处理的节点数量达到新节点总数，剩余旧节点直接删除
// 例如：新节点只有3个，但已经处理了3个，那么剩下的旧节点都是多余的
if (patched >= toBePatched) {
unmount(prevChild) // 卸载多余的旧节点
continue
}
let newIndex // 旧节点在新节点数组中对应的位置
// 🔑 如果旧节点有key，通过key快速查找对应的新节点位置
if (prevChild.key != null) {
newIndex = keyToNewIndexMap.get(prevChild.key)
} else {
// 🔍 如果旧节点没有key，只能线性搜索找到相同类型的新节点
// 注意：这种情况性能较差，建议给列表项添加key
for (j = s2; j <= e2; j++) {
// 检查：1) 新节点还没有被匹配 2) 新旧节点类型相同
if (
newIndexToOldIndexMap[j - s2] === 0 &&
isSameVNodeType(prevChild, c2[j])
) {
newIndex = j
break
}
}
}
// 🗑️ 如果旧节点在新节点中找不到对应项，说明被删除了
if (newIndex === undefined) {
unmount(prevChild) // 从DOM中移除
} else {
// ✅ 找到了对应的新节点，记录映射关系
// +1是因为0被用来表示"新节点"，所以旧索引要+1存储
newIndexToOldIndexMap[newIndex - s2] = i + 1
// 🚀 移动检测的巧妙算法：
// 如果新索引是递增的，说明节点顺序没变，不需要移动
// 如果新索引比之前的小，说明节点顺序乱了，需要移动
// 例如：旧节点A在位置0，B在位置1，如果新顺序是B(1)→A(0)，
// 那么处理A时，newIndex=0 < maxNewIndexSoFar=1，需要移动
if (newIndex >= maxNewIndexSoFar) {
maxNewIndexSoFar = newIndex // 更新最大索引
} else {
moved = true // 标记需要移动
}
// 🔧 对找到的节点进行patch（更新属性、子节点等）
patch(prevChild, c2[newIndex], container, null)
patched++ // 已处理数量+1
}
}
// 🎯 第三步：处理节点的移动和新节点的挂载
// 核心思想：只移动必要的节点，最大化复用现有DOM
// 🧮 如果需要移动，计算最长递增子序列（LIS）
// LIS的作用：找出哪些节点已经在正确位置，不需要移动
// 例如：[4,2,3,1,5] 的LIS是 [2,3,5]，这些位置的节点不用动
const increasingNewIndexSequence = moved
? getSequence(newIndexToOldIndexMap)
: []
j = increasingNewIndexSequence.length - 1 // LIS的指针，从后往前
// 🔄 从后往前遍历新子节点，确保插入位置正确
// 为什么从后往前？因为插入时需要知道"锚点"（插入位置的参考节点）
for (i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i // 当前新节点在整个新数组中的真实索引
const nextChild = c2[nextIndex] // 当前要处理的新节点
// 🎯 确定插入的锚点：下一个节点的DOM元素
// 如果没有下一个节点，就插入到容器末尾
const anchor =
nextIndex + 1 < newLen ? c2[nextIndex + 1].el : parentAnchor
// 🆕 如果是全新节点（映射值为0），直接挂载到DOM
if (newIndexToOldIndexMap[i] === 0) {
patch(null, nextChild, container, anchor)
}
// 🚚 如果需要移动节点
else if (moved) {
// 🎯 移动策略：只移动不在最长递增子序列中的节点
// 如果当前节点在LIS中，说明它已经在正确位置，不用移动
if (j < 0 || i !== increasingNewIndexSequence[j]) {
// 移动节点到正确位置（插入到anchor之前）
container.insertBefore(nextChild.el, anchor)
} else {
// 当前节点在LIS中，位置正确，不需要移动
j-- // LIS指针前移
}
}
}
🎯 五步优化策略详解
通过上面的核心代码，我们可以清晰地看到Vue3 Diff算法的五步处理逻辑。让我们逐一深入分析：
## 🔍 第一步：前序比较优化
```ts
// 📏 初始化指针和长度变量
let newLen = c2.length // 新子节点数组的长度
let oldLen = c1.length - 1 // 旧子节点数组的最后一个索引
let e1 = oldLen // 旧数组的结束指针（从后往前移动）
let e2 = newLen - 1 // 新数组的结束指针（从后往前移动）
let i = 0 // 开始指针（从前往后移动）
// 🔍 第一步：从前往后比较，找出开头相同的节点
// 目的：跳过开头相同的节点，减少后续比较的工作量
// 例如：[A,B,C,D] vs [A,B,X,Y] → 跳过A,B，从C,D vs X,Y开始处理
while (i <= e1 && i <= e2) {
const n1 = c1[i] // 当前旧节点
const n2 = c2[i] // 当前新节点
// 如果节点类型和key都相同，说明可以复用
if (isSameVNodeType(n1, n2)) {
// 递归更新这个节点（可能属性或子节点有变化）
patch(n1, n2, container, parentAnchor)
} else {
// 遇到不同的节点，停止前向比较
break
}
i++ // 指针前移
}
🎯 核心思想
前序比较的核心思想是跳过开头相同的节点，这是一个非常实用的优化策略：
-
时间复杂度：O(n)，其中n是相同前缀的长度
-
空间复杂度：O(1)，只使用常数级别的额外空间
-
实际效果：在列表末尾添加/删除元素的场景下，这一步就能处理大部分工作
📊 性能优势
// 场景示例：在列表末尾添加元素
// 旧列表：[A, B, C]
// 新列表：[A, B, C, D, E]
// 前序比较后：只需处理 [D, E] 的新增，跳过了 A, B, C 的比较
这种设计让Vue3在处理追加型更新（如聊天记录、商品列表加载更多）时性能极佳。
🔧 实现细节
// isSameVNodeType 的判断逻辑
function isSameVNodeType(n1: VNode, n2: VNode): boolean {
return n1.type === n2.type && n1.key === n2.key
}
// 为什么要调用 patch？
// 即使节点类型和key相同，节点的props或children可能发生变化
// patch函数会递归处理这些细节更新
🔄 第二步：后序比较优化
// 🔍 第二步：从后往前比较，找出结尾相同的节点
// 目的：跳过结尾相同的节点，进一步缩小需要处理的范围
// 例如：[A,B,C,D] vs [X,Y,C,D] → 跳过C,D，只需处理A,B vs X,Y
while (i <= e1 && i <= e2) {
const n1 = c1[e1] // 当前旧节点（从后往前）
const n2 = c2[e2] // 当前新节点（从后往前）
// 如果节点类型和key都相同，说明可以复用
if (isSameVNodeType(n1, n2)) {
// 递归更新这个节点
patch(n1, n2, container, parentAnchor)
} else {
// 遇到不同的节点，停止后向比较
break
}
e1-- // 旧数组指针前移
e2-- // 新数组指针前移
}
🎯 核心思想
后序比较是前序比较的镜像操作，专门处理列表尾部的相同节点：
-
双指针技术：
e1和e2分别指向旧列表和新列表的末尾
-
逆向遍历：从后往前比较，跳过尾部相同的节点
-
互补优化：与前序比较形成完美互补，覆盖更多优化场景
📊 典型应用场景
// 场景示例：在列表开头插入元素
// 旧列表：[A, B, C]
// 新列表：[X, Y, A, B, C]
// 后序比较后：跳过 A, B, C，只需处理 X, Y 的新增
🚀 双端优化的威力
前序 + 后序比较的组合，能够高效处理：
- ✅ 列表头部插入/删除
- ✅ 列表尾部插入/删除
- ✅ 列表两端同时变化
- ✅ 简单的元素替换
➕ 第三步：新增节点处理
// 📊 经过前后两轮比较后的状态分析：
// - i: 第一个不同节点的位置
// - e1: 旧数组中最后一个需要处理的节点位置
// - e2: 新数组中最后一个需要处理的节点位置
// ✅ 第三步：处理新增节点的情况
// 条件：i > e1 说明旧节点已经处理完，但新节点还有剩余
// 例如：旧[A,B] 新[A,B,C,D] → 需要新增C,D
if (i > e1) {
if (i <= e2) {
// 确定插入位置的锚点
const nextPos = e2 + 1
// 如果下一个位置存在节点，就插入到它前面；否则插入到容器末尾
const anchor = nextPos < newLen ? c2[nextPos].el : parentAnchor
// 挂载所有新增的节点
while (i <= e2) {
// patch(null, newNode) 表示挂载新节点
patch(null, c2[i], container, anchor)
i++
}
}
}
🎯 判断逻辑
经过前两步的双端比较后，如果满足 i > e1 && i <= e2，说明存在需要新增的节点：
-
i > e1：旧列表已经遍历完毕
-
i <= e2：新列表还有未处理的节点
-
结论：这些未处理的节点就是需要新增的节点
🔧 实现细节
// 锚点计算的巧妙之处
const nextPos = e2 + 1
const anchor = nextPos < newLen ? c2[nextPos].el : parentAnchor
// 为什么需要锚点？
// DOM的insertBefore需要一个参考节点
// 如果没有参考节点，就插入到容器末尾
📊 性能特点
-
时间复杂度：O(m)，其中m是新增节点的数量
-
空间复杂度：O(1)
-
DOM操作：只进行必要的插入操作，无多余的移动
当旧节点的数量少于新节点的数量时，那么此时就需要创建新节点来插入到对应的位置
🗑️ 第四步：删除节点处理
// 🗑️ 第四步：处理删除节点的情况
// 条件：i > e2 说明新节点已经处理完，但旧节点还有剩余
// 例如：旧[A,B,C,D] 新[A,B] → 需要删除C,D
else if (i > e2) {
while (i <= e1) {
// 卸载多余的旧节点
unmount(c1[i])
i++
}
}
🎯 判断逻辑
当满足 i > e2 && i <= e1 时，说明存在需要删除的节点：
-
i > e2：新列表已经遍历完毕
-
i <= e1：旧列表还有未处理的节点
-
结论：这些未处理的旧节点需要被删除
🔧 实现细节
// 删除操作的实现
if (i > e2) {
while (i <= e1) {
unmount(c1[i], parentComponent, parentSuspense, true)
i++
}
}
⚡ 性能优势
-
批量删除：一次性处理所有需要删除的节点
-
内存释放：及时释放不再需要的DOM节点和组件实例
-
事件清理：自动清理相关的事件监听器和响应式依赖
-
时间复杂度：O(k)，其中k是需要删除的节点数量
📊 典型应用场景
// 场景示例：删除列表中的部分元素
// 旧列表：[A, B, C, D, E]
// 新列表：[A, B]
// 删除处理：自动卸载 C, D, E
🌪️ 第五步：乱序情况下的终极优化
这是Vue3 Diff算法最精彩的部分，也是最长递增子序列真正发挥作用的地方。当前四步都无法处理时，说明遇到了复杂的乱序场景。
🎯 核心挑战
乱序场景的核心挑战是：如何用最少的DOM移动操作，将旧列表转换为新列表？
// 典型乱序场景
// 旧列表：[A, B, C, D, E]
// 新列表：[A, C, E, B, D, F]
// 挑战：B和D需要移动，F需要新增，同时要保持C和E的相对位置不变
🧩 三步解决策略
Vue3将这个复杂问题分解为三个子问题：
-
🗺️ 构建映射表：建立新节点key到索引的快速查找表
-
🔍 标记可复用节点：找出哪些旧节点可以复用，哪些需要删除
-
🎯 最优移动策略：使用最长递增子序列计算最少移动方案
🗺️ 第一部分：构建映射表
// 🎯 乱序情况的处理：这是Vue3 diff算法最复杂的部分
// 目标：用最少的DOM操作，将旧子节点列表转换为新子节点列表
const s1 = i // 旧子节点数组中需要处理的起始位置
const s2 = i // 新子节点数组中需要处理的起始位置
// 📋 第一步：建立"新节点key → 新节点索引"的快速查找表
// 作用：后面遍历旧节点时，可以快速找到对应的新节点位置
// 例如：新节点 [A, B, C] → Map { 'A': 0, 'B': 1, 'C': 2 }
const keyToNewIndexMap: Map<string | number | symbol, number> = new Map()
for (i = s2; i <= e2; i++) {
const nextChild = c2[i]
if (nextChild.key != null) {
keyToNewIndexMap.set(nextChild.key, i)
}
}
🎯 设计目的
构建映射表是一个经典的空间换时间优化策略：
-
时间复杂度：从O(n²)降低到O(n)
-
空间复杂度：O(n)，用于存储映射关系
-
查找效率：从线性查找提升到常数时间查找
📊 性能对比
// 没有映射表的查找（O(n²)）
for (let i = 0; i < oldChildren.length; i++) {
for (let j = 0; j < newChildren.length; j++) {
if (oldChildren[i].key === newChildren[j].key) {
// 找到匹配节点
}
}
}
// 使用映射表的查找（O(n)）
const keyToNewIndexMap = new Map()
for (let i = 0; i < newChildren.length; i++) {
keyToNewIndexMap.set(newChildren[i].key, i)
}
for (let i = 0; i < oldChildren.length; i++) {
const newIndex = keyToNewIndexMap.get(oldChildren[i].key)
// 常数时间找到匹配节点
}
🔧 实现细节
// 为什么使用 Map 而不是普通对象？
// 1. Map 支持任意类型的 key（string | number | symbol）
// 2. Map 的查找性能更稳定
// 3. Map 避免了原型链污染问题
// key 的类型检查
if (nextChild.key != null) {
// 只有明确设置了 key 的节点才参与映射
// undefined 和 null 都会被跳过
keyToNewIndexMap.set(nextChild.key, i)
}
🔍 第二部分：标记可复用节点与移动检测
// 🔄 第二步：遍历旧子节点，找出可以复用的节点并记录移动信息
let j
let patched = 0 // 已经处理（patch）的节点数量
const toBePatched = e2 - s2 + 1 // 新子节点中需要处理的总数量
let moved = false // 标记是否有节点需要移动位置
let maxNewIndexSoFar = 0 // 记录到目前为止遇到的最大新索引
// 📊 创建"新节点索引 → 旧节点索引"的映射数组
// 作用：记录每个新节点对应的旧节点位置，用于后续的移动优化
// 值的含义：0 = 全新节点，>0 = 可复用的旧节点索引+1
const newIndexToOldIndexMap = new Array(toBePatched)
for (i = 0; i < toBePatched; i++) newIndexToOldIndexMap[i] = 0
// 🔍 遍历所有旧子节点，决定每个节点的命运
for (i = s1; i <= e1; i++) {
const prevChild = c1[i] // 当前处理的旧节点
// ⚡ 性能优化：如果已处理的节点数量达到新节点总数，剩余旧节点直接删除
// 例如：新节点只有3个，但已经处理了3个，那么剩下的旧节点都是多余的
if (patched >= toBePatched) {
unmount(prevChild) // 卸载多余的旧节点
continue
}
let newIndex // 旧节点在新节点数组中对应的位置
// 🔑 如果旧节点有key，通过key快速查找对应的新节点位置
if (prevChild.key != null) {
newIndex = keyToNewIndexMap.get(prevChild.key)
} else {
// 🔍 如果旧节点没有key，只能线性搜索找到相同类型的新节点
// 注意：这种情况性能较差，建议给列表项添加key
for (j = s2; j <= e2; j++) {
// 检查：1) 新节点还没有被匹配 2) 新旧节点类型相同
if (
newIndexToOldIndexMap[j - s2] === 0 &&
isSameVNodeType(prevChild, c2[j])
) {
newIndex = j
break
}
}
}
// 🗑️ 如果旧节点在新节点中找不到对应项，说明被删除了
if (newIndex === undefined) {
unmount(prevChild) // 从DOM中移除
} else {
// ✅ 找到了对应的新节点，记录映射关系
// +1是因为0被用来表示"新节点"，所以旧索引要+1存储
newIndexToOldIndexMap[newIndex - s2] = i + 1
// 🚀 移动检测的巧妙算法：
// 如果新索引是递增的，说明节点顺序没变，不需要移动
// 如果新索引比之前的小，说明节点顺序乱了，需要移动
// 例如：旧节点A在位置0，B在位置1，如果新顺序是B(1)→A(0)，
// 那么处理A时，newIndex=0 < maxNewIndexSoFar=1，需要移动
if (newIndex >= maxNewIndexSoFar) {
maxNewIndexSoFar = newIndex // 更新最大索引
} else {
moved = true // 标记需要移动
}
// 🔧 对找到的节点进行patch（更新属性、子节点等）
patch(prevChild, c2[newIndex], container, null)
patched++ // 已处理数量+1
}
}
第三步：处理节点的移动和新节点的挂载
// 🎯 第三步：处理节点的移动和新节点的挂载
// 核心思想：只移动必要的节点，最大化复用现有DOM
// 🧮 如果需要移动，计算最长递增子序列（LIS）
// LIS的作用：找出哪些节点已经在正确位置，不需要移动
// 例如：[4,2,3,1,5] 的LIS是 [2,3,5]，这些位置的节点不用动
const increasingNewIndexSequence = moved
? getSequence(newIndexToOldIndexMap)
: []
j = increasingNewIndexSequence.length - 1 // LIS的指针，从后往前
// 🔄 从后往前遍历新子节点，确保插入位置正确
// 为什么从后往前？因为插入时需要知道"锚点"（插入位置的参考节点）
for (i = toBePatched - 1; i >= 0; i--) {
const nextIndex = s2 + i // 当前新节点在整个新数组中的真实索引
const nextChild = c2[nextIndex] // 当前要处理的新节点
// 🎯 确定插入的锚点：下一个节点的DOM元素
// 如果没有下一个节点，就插入到容器末尾
const anchor =
nextIndex + 1 < newLen ? c2[nextIndex + 1].el : parentAnchor
// 🆕 如果是全新节点（映射值为0），直接挂载到DOM
if (newIndexToOldIndexMap[i] === 0) {
patch(null, nextChild, container, anchor)
}
// 🚚 如果需要移动节点
else if (moved) {
// 🎯 移动策略：只移动不在最长递增子序列中的节点
// 如果当前节点在LIS中，说明它已经在正确位置，不用移动
if (j < 0 || i !== increasingNewIndexSequence[j]) {
// 移动节点到正确位置（插入到anchor之前）
container.insertBefore(nextChild.el, anchor)
} else {
// 当前节点在LIS中，位置正确，不需要移动
j-- // LIS指针前移
}
}
}
🧮 最长递增子序列算法深度解析
在第3部分中，涉及到了最长递增子序列：getSequence(newIndexToOldIndexMap)，这个函数是Vue3 Diff算法的核心优化，用于计算出最少的DOM移动次数。
🎯 算法核心思想
最长递增子序列（Longest Increasing Subsequence, LIS）在Vue3中的作用是：找出哪些节点已经处于正确的相对位置，无需移动。
// 示例场景
// newIndexToOldIndexMap: [4, 2, 3, 1, 5]
// 表示：新位置0对应旧位置3，新位置1对应旧位置1，以此类推
//
// LIS算法会找出：[2, 3, 5] （索引为1, 2, 4的元素）
// 含义：这些位置的节点相对顺序正确，不需要移动
// 只需要移动其他节点：索引0和3的节点
⚡ 算法实现与优化
/**
* 计算最长递增子序列的函数
* 这是Vue3 diff算法的核心优化，用于最小化DOM移动操作
*
* 🎯 算法原理：
* 1. 使用动态规划 + 二分查找，时间复杂度O(n log n)
* 2. 维护一个递增序列，对每个元素二分查找插入位置
* 3. 通过前驱数组记录路径，最后回溯得到完整序列
* 4. 贪心策略：总是保持当前长度下的最小尾元素
*
* @param arr 输入数组，通常是newIndexToOldIndexMap
* @returns 最长递增子序列的索引数组
*/
function getSequence(arr: number[]): number[] {
const p = arr.slice() // 🔗 前驱数组，记录每个位置的前一个元素索引
const result = [0] // 📊 结果数组，存储最长递增子序列的索引
let i, j, u, v, c
const len = arr.length
// 🔄 主循环：处理每个元素
for (i = 0; i < len; i++) {
const arrI = arr[i]
// ⚡ 关键优化：跳过值为0的元素
// 0表示新节点，不参与LIS计算，因为新节点没有"原始位置"
if (arrI !== 0) {
j = result[result.length - 1] // 当前序列的最后一个索引
// 🚀 快速路径：如果当前元素大于序列最后元素，直接追加
// 这是最常见的情况，避免了二分查找的开销
if (arr[j] < arrI) {
p[i] = j // 记录前驱关系
result.push(i) // 扩展序列
continue
}
// 🔍 二分查找：找到第一个大于等于arrI的位置
// 目标：在保持序列递增的前提下，找到最佳插入位置
u = 0 // 左边界
v = result.length - 1 // 右边界
while (u < v) {
c = (u + v) >> 1 // 🎯 位运算取中点，比Math.floor((u + v) / 2)更快
if (arr[result[c]] < arrI) {
u = c + 1 // 在右半部分继续查找
} else {
v = c // 在左半部分继续查找
}
}
// 🔄 贪心替换：如果找到更优的元素，进行替换
// 贪心策略：相同长度的递增序列中，尾元素越小越好
if (arrI < arr[result[u]]) {
if (u > 0) {
p[i] = result[u - 1] // 记录前驱关系
}
result[u] = i // 替换为更优的元素
}
}
}
// 🔙 回溯构建最长递增子序列
// 由于替换操作，result数组存储的不是最终序列
// 需要通过前驱数组p来重建真正的LIS
u = result.length
v = result[u - 1] // 从最后一个元素开始回溯
while (u-- > 0) {
result[u] = v // 重建序列
v = p[v] // 跳转到前驱元素
}
return result
}
📊 算法复杂度分析
| 操作 |
时间复杂度 |
空间复杂度 |
说明 |
| 构建LIS |
O(n log n) |
O(n) |
二分查找优化的动态规划 |
| 回溯重建 |
O(k) |
O(1) |
k为LIS长度 |
| 总体 |
O(n log n) |
O(n) |
相比暴力O(n²)有显著提升 |
🎨 实际应用示例
// 🎯 实际场景演示
// 旧列表：[A, B, C, D, E] 索引：[0, 1, 2, 3, 4]
// 新列表：[B, A, D, C, E] 索引：[0, 1, 2, 3, 4]
// Step 1: 构建 newIndexToOldIndexMap
// B(新0) -> 旧1: map[0] = 2 (+1偏移)
// A(新1) -> 旧0: map[1] = 1 (+1偏移)
// D(新2) -> 旧3: map[2] = 4 (+1偏移)
// C(新3) -> 旧2: map[3] = 3 (+1偏移)
// E(新4) -> 旧4: map[4] = 5 (+1偏移)
// 结果：[2, 1, 4, 3, 5]
// Step 2: 计算LIS
const lis = getSequence([2, 1, 4, 3, 5])
// 返回：[1, 3, 4] （对应新列表中A, C, E的位置）
// Step 3: 移动策略
// 不移动：A(位置1), C(位置3), E(位置4) - 在LIS中
// 需移动：B(位置0), D(位置2) - 不在LIS中
// 结果：只需要2次DOM移动操作，而不是4次
🚀 性能优化细节
1. 位运算优化
// 使用位运算代替除法，提升性能
c = (u + v) >> 1 // 比 Math.floor((u + v) / 2) 快约20%
2. 早期退出策略
// 快速路径：避免不必要的二分查找
if (arr[j] < arrI) {
result.push(i)
continue // 直接跳过二分查找
}
3. 贪心策略
// 相同长度的序列中，选择尾元素最小的
// 这样为后续元素提供更多的扩展可能性
if (arrI < arr[result[u]]) {
result[u] = i // 贪心替换
}
🎯 为什么选择LIS？
-
最优性保证：LIS确保找到需要移动的最少节点数
-
稳定性：相对位置正确的节点不会被移动
-
高效性：O(n log n)的时间复杂度，适合大列表
-
实用性：大多数实际场景下，列表变化都有一定的局部性
这就是Vue3 Diff算法中最长递增子序列的完整实现和优化策略。它不仅仅是一个算法，更是Vue3性能优化的核心体现。
🎯 核心原理总结
🔍 关键技术洞察
1. 五步优化策略的设计哲学
Vue3的Diff算法并非单纯依赖最长递增子序列，而是采用分层优化的设计思想：
-
前四步：处理90%的常见场景（前后端比较、增删操作）
-
第五步：处理10%的复杂场景（乱序移动）
-
核心理念：用简单算法处理简单问题，用复杂算法处理复杂问题
2. Key值的核心作用机制
// Key值的三重作用
1. 🔍 节点识别：快速判断节点是否可复用
2. ⚡ 性能优化：从O(n²)降低到O(n)
3. 🎯 移动计算：为LIS算法提供准确的位置映射
为什么v-for需要手动添加key？
- ✅ 其他节点：Vue3自动生成key（基于节点类型和位置）
- ❌ v-for节点：动态生成，无法自动推断稳定的key
- 🎯 解决方案：开发者提供业务相关的唯一标识
3. 算法复杂度的渐进优化
| 场景 |
传统算法 |
Vue3算法 |
优化效果 |
| 前后端添加 |
O(n²) |
O(n) |
🚀 线性优化 |
| 简单移动 |
O(n²) |
O(n) |
🚀 线性优化 |
| 复杂乱序 |
O(n²) |
O(n log n) |
⚡ 对数优化 |
| 无key场景 |
O(n³) |
O(n²) |
📈 仍需优化 |
🎨 设计模式分析
1. 分治策略（Divide and Conquer）
// 将复杂的列表比较问题分解为5个子问题
// 每个子问题都有针对性的优化策略
function patchKeyedChildren() {
// 分治：前序比较
syncFromStart()
// 分治：后序比较
syncFromEnd()
// 分治：新增处理
mountNewNodes()
// 分治：删除处理
unmountOldNodes()
// 分治：乱序处理
handleComplexCase()
}
2. 贪心算法（Greedy Algorithm）
// 在LIS算法中的应用
// 总是选择当前长度下的最小尾元素
// 为后续扩展提供最大可能性
if (arrI < arr[result[u]]) {
result[u] = i // 贪心选择
}
3. 动态规划（Dynamic Programming）
// LIS算法的DP思想
// 状态：dp[i] = 以i结尾的最长递增子序列长度
// 转移：通过二分查找优化状态转移
🚀 性能优化要点
1. 空间换时间
- 映射表：O(n)空间换取O(1)查找时间
- 前驱数组：O(n)空间支持LIS回溯
- 索引映射：避免重复的DOM查询
2. 算法层面优化
- 二分查找：将LIS从O(n²)优化到O(n log n)
- 位运算：使用
>>代替除法运算
- 早期退出：避免不必要的计算
3. 工程层面优化
- 批量操作：减少DOM操作次数
- 锚点策略：精确控制插入位置
- 内存管理：及时释放不再需要的引用
🔮 与Vue2的对比
| 特性 |
Vue2 |
Vue3 |
改进 |
| 算法策略 |
双端比较 |
五步优化 |
🎯 更全面 |
| 复杂度 |
O(n²) |
O(n log n) |
⚡ 更高效 |
| 移动优化 |
启发式 |
LIS算法 |
🧮 更精确 |
| 内存使用 |
较高 |
优化 |
💾 更节省 |
💡 最佳实践建议
1. Key值设计原则
// ✅ 推荐：使用稳定的业务ID
<li v-for="user in users" :key="user.id">
// ❌ 避免：使用数组索引
<li v-for="(user, index) in users" :key="index">
// ❌ 避免：使用随机值
<li v-for="user in users" :key="Math.random()">
2. 列表更新策略
// 🚀 高效：批量更新
const newUsers = [...users, ...newData]
users.value = newUsers
// 🐌 低效：逐个更新
newData.forEach(user => users.value.push(user))
3. 性能监控
// 开发环境下监控Diff性能
if (__DEV__) {
console.time('diff-performance')
patchKeyedChildren()
console.timeEnd('diff-performance')
}
🎓 进阶学习建议
-
算法基础：深入学习动态规划、贪心算法、二分查找
-
数据结构：理解Map、数组操作的性能特点
-
浏览器原理：了解DOM操作的性能成本
-
Vue源码：阅读完整的patch函数实现
-
性能调优：使用Vue DevTools分析实际项目的Diff性能
🌟 结语
Vue3的Diff算法是前端框架设计的典型代表，它完美诠释了工程化思维：
- 🎯 问题分解：将复杂问题分解为可管理的子问题
- ⚡ 性能优先：在保证正确性的前提下追求极致性能
- 🔧 工程实用：算法设计贴近实际应用场景
- 📈 持续优化：从Vue2到Vue3的不断改进
掌握Vue3 Diff算法，不仅能帮助我们写出更高性能的Vue应用，更能提升我们的算法思维和工程能力。这正是优秀前端工程师必备的核心素养。
登录