电商网站设计方案上海推广外包
在 Vue 3 的虚拟 DOM 更新机制中，Diff 算法扮演着至关重要的角色。它不仅决定了如何高效地比较新旧节点树的变化，还直接影响了最终的 DOM 操作性能。本文将以一个具体的例子为基础，深入剖析 Vue 3 中 Diff 算法在处理相同节点但顺序不同时的优化策略。
示例背景：
旧节点队列（c1）：a b [c d e] f g
新节点队列（c2）：a b [e c d h] f g
其中 [c d e] 和 [e c d h] 是发生变化的部分，经过双端比较后，我们从索引 i = 2 开始进行 Diff 比较，对应的旧子序列范围是 [2, 4]，新子序列范围是 [2, 5]。
旧结束下标使用e1表示为e1=4
新结束下标使用e2表示为e2=5
第一步：建立新节点的 key 到索引的映射表
为了快速定位新节点在旧结构中的位置，Vue 会先构建一个 Map，用于记录新子序列中每个节点的 key 及其索引：
const keyToNewIndexMap = new Map();
for (let i = s2; i <= e2; i++) {const nextChild = c2[i];keyToNewIndexMap.set(nextChild.key, i);
}
假设节点的 key 分别为：
| 节点 | key |
|---|---|
| e | e |
| c | c |
| d | d |
| h | h |
| 则生成的映射关系为： |
{e: 2,c: 3,d: 4,h: 5
}
第二步：标记新旧节点之间的对应关系
接下来，我们遍历旧子序列，查找它们在新子序列中的位置，并记录下来：
const toBePatched = e2 - s2 + 1; // 新节点序列个数
const newIndexToOldMapIndex = new Array(toBePatched).fill(0);// 0代表新增节点for (let i = s1; i <= e1; i++) {const prevChild = c1[i];let newIndex = keyToNewIndexMap.get(prevChild.key);if (newIndex == undefined) { // 新队列不存在旧节点直接删除unmount(prevChild);} else { // 记录旧节点所在的新位置newIndexToOldMapIndex[newIndex - s2] = i + 1;patch(prevChild, c2[newIndex], container);// 比对}
}
在这个例子中，旧子序列 [c, d, e] 对应的新索引如下：
newIndexToOldMapIndex = [5, 3, 4, 0] // 下标的值代表旧节点所在的位置
倒序处理，插入新增节点并移动旧节点
for (let i = toBePatched - 1; i >= 0; i--) {const nextIndex = s2 + i;const nextChild = c2[nextIndex];let anchor = nextIndex + 1 < c2.length ? c2[nextIndex + 1].el : null;if (newIndexToOldMapIndex[i] == 0) {patch(null, nextChild, container, anchor);} else {hostInsert(nextChild.el, container, anchor);}
}
总结：Vue 3 Diff 算法的关键点
双指针同步扫描：通过 s1, e1 和 s2, e2 定位变化区域，缩小比对范围。
Map 映射加速查找：使用 key 来快速定位节点在新旧队列中的位置。
倒序处理：确保插入操作不影响后续节点的参照物。
区分新增/删除/移动节点：精确控制 DOM 的变更类型，提升性能。