Vue2 vs Vue3 Diff算法深度解析：从双端比较到快速Diff
什么是虚拟DOM
DOM是很慢的，其元素非常庞大，当我们频繁的去做 DOM更新，会产生一定的性能问题，我们可以直观感受一下 div元素包含的海量属性
在Javascript对象中，
虚拟DOM 表现为一个 Object对象（以VNode 节点作为基础的树）。并且最少包含标签名tag、属性attrs和子元素对象children三个属性，不同框架对这三个属性的名命可能会有差别。
<ul style="color: #de5e60; border: 1px solid #de5e60">
<li key="a">a</li>
<li key="b">b</li>
<li key="c">c</li>
</ul>
真实节点对应的虚拟DOM：
const VDOM = {
tag: 'ul',
data: {
style: { color: '#de5e60', border: '1px solid #de5e60' },
},
children: [
{
tag: 'li',
key: 'a',
data: {},
children: [{ text: 'a' }],
},
{
tag: 'li',
key: 'b',
data: {},
children: [{ text: 'b'}],
},
{
tag: 'li',
key: 'c',
data: {},
children: [{ text: 'c'}],
},
],
}
我们常说虚拟DOM可以提升效率。这句话是不严谨的❌
通过虚拟DOM改变真正的 DOM并不比直接操作 DOM效率更高。恰恰相反，我们仍需要调用DOM API去操作 DOM，并且虚拟DOM还会额外占用内存
but！！！我们可以通过 虚拟DOM + diff算法，找到需要更新的最小单位，最大限度地减少DOM操作，从而提升性能。
Vue2 Diff算法：双端比较 + 递归
什么是Diff
Dom 是多叉树结构，完整对比两棵树的差异，时间复杂度是O(n³)，这个复杂度会导致比对性能很差！
为了优化，Diff 算法约定只做同层级节点比对，而不是跨层级节点比对，即深度优先遍历算法，其复杂度为O(n)
核心思想
Vue2的Diff算法基于"同层比较"和"双端比较"的思想，通过递归遍历新旧虚拟DOM树，在每一层使用双指针技术进行高效比较。
比对新旧虚拟节点打补丁，diff比对规则如下：
-
新旧节点不相同（判断节点的tag和节点的key），直接用新节点替换旧节点，无需比对
-
新旧节点相同，且都是文本节点，更新文本内容即可
-
新旧节点是同一个节点，比较两个节点的属性是否有差异，复用旧的节点，将差异的属性更新
-
节点比较完毕后，需要比较两个节点的儿子
- 新旧节点都有儿子，调用
updateChildren()，这里是diff算法核心逻辑！后面会详细讲解 - 新节点有儿子，旧节点没有儿子，将新的子节点挂载到
oldVNode.el上 - 旧节点有儿子，新节点没有儿子，删除
oldVNode.el的所有子节点
- 新旧节点都有儿子，调用
算法流程
1. 整体Diff策略
function patchVnode(oldVNode, vnode) {
// 1. 新旧节点不相同（判断节点的tag和节点的key），直接用新节点替换旧节点，无需比对
if (!isSameVnode(oldVNode, vnode)) {
let el = createElm(vnode)
oldVNode.el.parentNode.replaceChild(el, oldVNode.el)
return el
}
let el = (vnode.el = oldVNode.el)
// 2. 新旧节点相同，且是文本 (判断节点的tag和节点的key)，比较文本内容
if (!oldVNode.tag) {
if (oldVNode.text !== vnode.text) {
el.textContent = vnode.text // 用新的文本覆盖掉旧的
}
}
// 3. 新旧节点相同，且是标签 (判断节点的tag和节点的key)
// 3.1 比较标签属性
patchProps(el, oldVNode.data, vnode.data)
let oldChildren = oldVNode.children || []
let newChildren = vnode.children || []
// 4 比较两个节点的儿子
// 4.1 新旧节点都有儿子
if (oldChildren.length > 0 && newChildren.length > 0) {
// diff算法核心！！！
updateChildren(el, oldChildren, newChildren)
}
// 4.2 新节点有儿子，旧节点没有儿子，挂载
else if (newChildren.length > 0) {
mountChildren(el, newChildren)
}
// 4.3 旧节点有儿子，新节点没有儿子，删除
else if (oldChildren.length > 0) {
el.innerHTML = ''
}
}
核心算法：updateChildren
这个方法是diff比对的核心！
vue2中采用了头尾双指针的方式，通过头头、尾尾、头尾、尾头、乱序五种比对方式，进行新旧虚拟节点的依次比对
在比对过程中，我们需要四个指针，分别指向新旧列表的头部和尾部。为了方便我们理解，我使用了不同颜色和方向的箭头加以区分，图例如下：
四种“命中”场景（O(1)）
每轮最多做这4种对比之一，命中就处理并移动指针：
- 头对头：oldStart vs newStart
- 尾对尾：oldEnd vs newEnd
- 头对尾：oldStart vs newEnd（旧头移动到旧尾后面）
- 尾对头：oldEnd vs newStart（旧尾移动到旧头前面）
双端比对
头头比对
旧孩子的头 比对 新孩子的头
如果是相同节点，则调用patchVnode打补丁并递归比较子节点；然后将 新旧列表的头指针 都向后移动
终止条件：双方有一方头指针大于尾指针，则停止循环
if (isSameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode)
oldStartVnode = oldChildren[++oldStartIndex]
newStartVnode = newChildren[++newStartIndex]
}
头尾比对
旧孩子的头 和 新孩子的尾比较
如果是相同节点，则调用patchVnode打补丁并递归比较子节点；然后将 oldStartVnode 移动到 oldEndVnode 的后面（把 旧列表头指针指向的节点 移动到 旧列表尾指针指向的节点 后面）
最后把 旧列表头指针 向后移动，新列表尾指针 向前移动
终止条件：双方有一方头指针大于尾指针，则停止循环
else if (isSameVnode(oldStartVnode, newEndVnode)) {
patchVnode(oldStartVnode, newEndVnode)
el.insertBefore(oldStartVnode.el, oldEndVnode.el.nextSibling)
oldStartVnode = oldChildren[++oldStartIndex]
newEndVnode = newChildren[--newEndIndex]
}
乱序比对
每次比对时，优先进行头头、尾尾、头尾、尾头的比对尝试，如果都没有命中才会进行乱序比较
- 我们根据旧的列表创建一个
key -> index的映射表，拿新的儿子去映射关系里查找。注意：查找时只能找得到key相同的老节点，并没判断tag - 若找的到相同key的老节点并且是相同节点，则复用节点移动到
oldStartVnode（旧列表头指针指向的节点）的前面，然后调用patchVnode打补丁递归比较子节点（移动走的老位置要做空标记，表示这个旧节点已经被移动过了，后续比对时可直接跳过此节点） - 否则，创建节点并移动到
oldStartVnode（旧列表头指针指向的节点）的前面 - 只需将
新列表头指针向后移动即可 - 最后删除老列表中多余的节点，此过程在下一章挂载卸载阶段删除掉
终止条件：双方有一方头指针大于尾指针，则停止循环
----------------- 创建映射关系 -----------------------
function makeIndexByKey(children) {
let map = {}
children.forEach((child, index) => {
map[child.key] = index
})
return map
}
// 旧孩子映射表(key-index)，用于乱序比对
let map = makeIndexByKey(oldChildren)
-------------------- 乱序比对 -------------------------
if (!oldStartVnode) {
oldStartVnode = oldChildren[++oldStartIndex]
continue
}
if (!oldEndVnode) {
oldEndVnode = oldChildren[--oldEndIndex]
continue
}
let moveIndex = map[newStartVnode.key]
// 找的到相同key的老节点，并且是相同节点
if (moveIndex !== undefined && isSameVnode(oldChildren[moveIndex], newStartVnode)) {
let moveVnode = oldChildren[moveIndex] // 复用旧的节点
el.insertBefore(moveVnode.el, oldStartVnode.el) // 将 moveVnode 移动到 oldStartVnode的前面（把复用节点 移动到 旧列表头指针指向的节点 前面）
oldChildren[moveIndex] = undefined // 表示这个旧节点已经被移动过了
patchVnode(moveVnode, newStartVnode) // 递归比较子节点
}
// 找不到相同key的老节点 or 找的到相同key的老节点但tag不相同
else {
el.insertBefore(createElm(newStartVnode), oldStartVnode.el) // 将 创建的节点 移动到 oldStartVnode的前面（把创建的节点 移动到 旧列表头指针指向的节点 前面）
}
newStartVnode = newChildren[++newStartIndex]
挂载卸载
终止条件：双方有一方头指针大于尾指针，则停止循环。 当循环比对结束后，我们需要将新列表中多余的节点插入到oldVNode.el中，并将老列表中多余的节点删除掉。
我们将其划分为4种场景，可参考头头比对、尾尾比对章节的图辅助理解
- 同序列尾部挂载：
新列表头指针到新列表尾指针的节点需要挂载新增，向后追加 - 同序列头部挂载：
新列表头指针到新列表尾指针的节点需要挂载新增，向前追加 - 同序列尾部卸载：
旧列表头指针到旧列表尾指针的节点需要卸载删除 - 同序列头部卸载： 和 同序列尾部卸载 逻辑一致
tip：何时向后追加，何时向前追加，我们根据什么去判断的呢？
若 新列表尾指针指向的节点 的下一个节点存在，则向前追加，插入到newChildren[newEndIndex + 1].el的前面；若不存在，则向后追加，插入到oldVNode.el子节点列表的末尾处
// 同序列尾部挂载，向后追加
// a b c d
// a b c d e f
// 同序列头部挂载，向前追加
// a b c d
// e f a b c d
if (newStartIndex <= newEndIndex) {
for (let i = newStartIndex; i <= newEndIndex; i++) {
let childEl = createElm(newChildren[i])
// 这里可能是向后追加 ，也可能是向前追加
let anchor = newChildren[newEndIndex + 1] ? newChildren[newEndIndex + 1].el : null
el.insertBefore(childEl, anchor) // anchor为null的时候等同于 appendChild
}
}
// 同序列尾部卸载，删除尾部多余的旧孩子
// a b c d e f
// a b c d
// 同序列头部卸载，删除头部多余的旧孩子
// e f a b c d
// a b c d
if (oldStartIndex <= oldEndIndex) {
for (let i = oldStartIndex; i <= oldEndIndex; i++) {
if (oldChildren[i]) {
let childEl = oldChildren[i].el
el.removeChild(childEl)
}
}
}
总结
vue2采用了头尾双指针的方法，每次比对时，优先进行头头、尾尾、头尾、尾头的比对尝试，如果都没有命中才会进行乱序比对
当比对命中时（新旧节点是相同的），则调用patchVnode打补丁并递归比较子节点；打完补丁后呢，如果该节点是头指针指向的节点就向后移动指针，是尾指针指向的节点则向前移动指针
终止条件：双方有一方头指针大于尾指针，则停止循环
如果双端比对中的头尾、尾头命中了节点，也需要进行节点移动操作，为什么不直接用乱序比对呢，没理解其优势在哪？
但是双端diff相比于简单diff性能肯定会更好一些，例如：从 ABCD 到 DABC。简单diff需要移动 ABC 三个节点，但是双端diff只需要移动 D 一个节点
tip：vue3中并没有头尾、尾头比对的概念；新增了最长递增子序列算法去优化乱序比对，减少了乱序比对中节点的移动次数
updateChildren算法实现
function updateChildren(el, oldChildren, newChildren) {
let oldStartIndex = 0
let newStartIndex = 0
let oldEndIndex = oldChildren.length - 1
let newEndIndex = newChildren.length - 1
let oldStartVnode = oldChildren[0]
let newStartVnode = newChildren[0]
let oldEndVnode = oldChildren[oldEndIndex]
let newEndVnode = newChildren[newEndIndex]
function makeIndexByKey(children) {
let map = {}
children.forEach((child, index) => {
map[child.key] = index
})
return map
}
// 旧孩子映射表(key-index)，用于乱序比对
let map = makeIndexByKey(oldChildren)
// 双方有一方头指针大于尾部指针，则停止循环
while (oldStartIndex <= oldEndIndex && newStartIndex <= newEndIndex) {
if (!oldStartVnode) {
oldStartVnode = oldChildren[++oldStartIndex]
continue
}
if (!oldEndVnode) {
oldEndVnode = oldChildren[--oldEndIndex]
continue
}
// 双端比较_1 - 旧孩子的头 比对 新孩子的头；
// 都从头部开始比对（对应场景：同序列尾部挂载-push、同序列尾部卸载-pop）
if (isSameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode) // 如果是相同节点，则打补丁，并递归比较子节点
oldStartVnode = oldChildren[++oldStartIndex]
newStartVnode = newChildren[++newStartIndex]
}
// 双端比较_2 - 旧孩子的尾 比对 新孩子的尾；
// 都从尾部开始比对（对应场景：同序列头部挂载-unshift、同序列头部卸载-shift）
else if (isSameVnode(oldEndVnode, newEndVnode)) {
patchVnode(oldEndVnode, newEndVnode) // 如果是相同节点，则打补丁，并递归比较子节点
oldEndVnode = oldChildren[--oldEndIndex]
newEndVnode = newChildren[--newEndIndex]
}
// 双端比较_3 - 旧孩子的头 比对 新孩子的尾；
// 旧孩子从头部开始，新孩子从尾部开始（对应场景：指针尽可能向内靠拢；极端场景-reverse）
else if (isSameVnode(oldStartVnode, newEndVnode)) {
patchVnode(oldStartVnode, newEndVnode)
el.insertBefore(oldStartVnode.el, oldEndVnode.el.nextSibling) // 将 oldStartVnode 移动到 oldEndVnode的后面（把当前节点 移动到 旧列表尾指针指向的节点 后面）
oldStartVnode = oldChildren[++oldStartIndex]
newEndVnode = newChildren[--newEndIndex]
}
// 双端比较_4 - 旧孩子的尾 比对 新孩子的头；
// 旧孩子从尾部开始，新孩子从头部开始（对应场景：指针尽可能向内靠拢；极端场景-reverse）
else if (isSameVnode(oldEndVnode, newStartVnode)) {
patchVnode(oldEndVnode, newStartVnode)
el.insertBefore(oldEndVnode.el, oldStartVnode.el) // 将 oldEndVnode 移动到 oldStartVnode的前面（把当前节点 移动到 旧列表头指针指向的节点 前面）
oldEndVnode = oldChildren[--oldEndIndex]
newStartVnode = newChildren[++newStartIndex]
}
// 乱序比对
// 根据旧的列表做一个映射关系，拿新的节点去找，找到则移动；找不到则添加；最后删除多余的旧节点
else {
let moveIndex = map[newStartVnode.key]
// 找的到相同key的老节点，并且是相同节点
if (moveIndex !== undefined && isSameVnode(oldChildren[moveIndex], newStartVnode)) {
let moveVnode = oldChildren[moveIndex] // 复用旧的节点
el.insertBefore(moveVnode.el, oldStartVnode.el) // 将 moveVnode 移动到 oldStartVnode的前面（把复用节点 移动到 旧列表头指针指向的节点 前面）
oldChildren[moveIndex] = undefined // 表示这个旧节点已经被移动过了
patchVnode(moveVnode, newStartVnode) // 比对属性和子节点
}
// 找不到相同key的老节点 or 找的到相同key的老节点但tag不相同
else {
el.insertBefore(createElm(newStartVnode), oldStartVnode.el) // 将 创建的节点 移动到 oldStartVnode的前面（把创建的节点 移动到 旧列表头指针指向的节点 前面）
}
newStartVnode = newChildren[++newStartIndex]
}
}
// 同序列尾部挂载，向后追加
// a b c d
// a b c d e f
// 同序列头部挂载，向前追加
// a b c d
// e f a b c d
if (newStartIndex <= newEndIndex) {
for (let i = newStartIndex; i <= newEndIndex; i++) {
let childEl = createElm(newChildren[i])
// 这里可能是向后追加 ，也可能是向前追加
let anchor = newChildren[newEndIndex + 1] ? newChildren[newEndIndex + 1].el : null // 获取下一个元素
// el.appendChild(childEl);
el.insertBefore(childEl, anchor) // anchor为null的时候等同于 appendChild
}
}
// 同序列尾部卸载，删除尾部多余的旧孩子
// a b c d e f
// a b c d
// 同序列头部卸载，删除头部多余的旧孩子
// e f a b c d
// a b c d
if (oldStartIndex <= oldEndIndex) {
for (let i = oldStartIndex; i <= oldEndIndex; i++) {
if (oldChildren[i]) {
let childEl = oldChildren[i].el
el.removeChild(childEl)
}
}
}
}
双端比较的优势
- 快速命中常见场景：对于列表的头部插入、尾部插入、整体移动等操作，双端比较能快速识别并复用节点
- 减少DOM操作：通过移动现有DOM节点而不是删除重建，大幅提升性能
- 时间复杂度：在理想情况下接近O(n)，最坏情况下为O(n²)
性能分析
时间复杂度
- 最佳情况：O(n) - 当新旧节点顺序完全一致时
- 平均情况：O(n) - 大部分实际场景下
- 最坏情况：O(n²) - 当需要频繁移动节点时
空间复杂度
- 递归调用：O(h) - h为树的高度
- key映射：O(n) - 临时存储旧节点的key索引
常见问题
-
深度优先算法为什么又是同层比较：
- 指的是在updateChildren函数中，新节点与旧节点的同层比较
-
为什么用深度优先：
- 不用深度优先的话，组件间的生命周期不好控制，容易混乱。
- 内存效率。 深度优先：栈空间 O(h)，h为树的高度；广度优先：队列空间 O(w)，w为树的宽度（可能很大）
-
时间复杂度：在理想情况下接近O(n)，最坏情况下为O(n²)
Vue3 Diff算法：快速Diff + 最长递增子序列
核心改进
Vue3在Vue2的基础上进行了重大优化，引入了"快速Diff"算法，通过预处理和最长递增子序列算法来进一步提升性能。
算法流程
1. 预处理优化
function patchChildren(n1, n2, container, anchor) {
// 1. 快速路径：如果新子节点是文本
if (typeof n2.children === 'string') {
if (Array.isArray(n1.children)) {
unmountChildren(n1.children);
}
setElementText(container, n2.children);
return;
}
// 2. 快速路径：如果新子节点是数组
if (Array.isArray(n2.children)) {
if (Array.isArray(n1.children)) {
// 核心Diff算法
patchKeyedChildren(n1.children, n2.children, container, anchor);
} else {
// 旧子节点不是数组，直接挂载新子节点
setElementText(container, '');
mountChildren(n2.children, container, anchor);
}
return;
}
// 3. 新子节点不存在
if (Array.isArray(n1.children)) {
unmountChildren(n1.children);
} else if (typeof n1.children === 'string') {
setElementText(container, '');
}
}
2. 核心Diff算法：patchKeyedChildren
function patchKeyedChildren(c1, c2, container, anchor) {
let i = 0;
let e1 = c1.length - 1;
let e2 = c2.length - 1;
// 1. 从头部开始比较
while (i <= e1 && i <= e2) {
if (isSameVNodeType(c1[i], c2[i])) {
patch(c1[i], c2[i], container, anchor);
} else {
break;
}
i++;
}
// 2. 从尾部开始比较
while (i <= e1 && i <= e2) {
if (isSameVNodeType(c1[e1], c2[e2])) {
patch(c1[e1], c2[e2], container, anchor);
} else {
break;
}
e1--;
e2--;
}
// 3. 处理新增节点
if (i > e1) {
if (i <= e2) {
const nextPos = e2 + 1;
const anchor = nextPos < c2.length ? c2[nextPos].el : anchor;
while (i <= e2) {
patch(null, c2[i], container, anchor);
i++;
}
}
}
// 4. 处理删除节点
else if (i > e2) {
while (i <= e1) {
unmount(c1[i]);
i++;
}
}
// 5. 处理未知序列
else {
const s1 = i;
const s2 = i;
// 构建key到新索引的映射
const keyToNewIndexMap = 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;
const toBePatched = e2 - s2 + 1;
let moved = false;
let maxNewIndexSoFar = 0;
const newIndexToOldIndexMap = new Array(toBePatched);
for (i = 0; i < toBePatched; i++) {
newIndexToOldIndexMap[i] = 0;
}
// 遍历旧子节点
for (i = s1; i <= e1; i++) {
const prevChild = c1[i];
if (patched >= toBePatched) {
unmount(prevChild);
continue;
}
let newIndex = keyToNewIndexMap.get(prevChild.key);
if (newIndex === undefined) {
unmount(prevChild);
} else {
newIndexToOldIndexMap[newIndex - s2] = i + 1;
if (newIndex >= maxNewIndexSoFar) {
maxNewIndexSoFar = newIndex;
} else {
moved = true;
}
patch(prevChild, c2[newIndex], container, anchor);
patched++;
}
}
// 6. 使用最长递增子序列算法优化移动
if (moved) {
const seq = getSequence(newIndexToOldIndexMap);
j = seq.length - 1;
for (i = toBePatched - 1; i >= 0; i--) {
if (i === seq[j]) {
j--;
} else {
const pos = i + s2;
const nextPos = pos + 1;
const anchor = nextPos < c2.length ? c2[nextPos].el : anchor;
if (newIndexToOldIndexMap[i] === 0) {
patch(null, c2[pos], container, anchor);
} else {
move(c2[pos], container, anchor);
}
}
}
}
}
}
3. 最长递增子序列算法
function getSequence(arr) {
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];
if (arrI !== 0) {
j = result[result.length - 1];
if (arr[j] < arrI) {
p[i] = j;
result.push(i);
continue;
}
u = 0;
v = result.length - 1;
while (u < v) {
c = ((u + v) / 2) | 0;
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;
}
}
}
u = result.length;
v = result[u - 1];
while (u-- > 0) {
result[u] = v;
v = p[v];
}
return result;
}
Vue3的优化策略
1. 静态提升
- 将静态节点提升到渲染函数外部，避免重复创建
- 减少虚拟DOM的创建和销毁开销
2. 补丁标记
- 使用补丁标记（patchFlag）标识动态内容
- 只更新标记为动态的部分，跳过静态内容
3. 树结构优化
- 扁平化虚拟DOM树结构
- 减少遍历深度，提升Diff效率
4. 缓存优化
- 缓存事件处理器和插槽内容
- 避免不必要的重新渲染
性能对比分析
时间复杂度对比
| 算法 | 最佳情况 | 平均情况 | 最坏情况 |
|---|---|---|---|
| Vue2 | O(n) | O(n) | O(n²) |
| Vue3 | O(n) | O(n) | O(n log n) |
实际性能提升
- 列表渲染：Vue3在长列表场景下性能提升30-50%
- 组件更新：静态内容跳过更新，性能提升显著
- 内存占用：减少虚拟DOM节点创建，内存使用更优
适用场景分析
Vue2适合的场景
- 简单的列表操作
- 节点数量较少的组件
- 对兼容性要求较高的项目
Vue3适合的场景
- 复杂的列表操作
- 大型应用和组件库
- 对性能要求较高的项目
总结
Vue2的Diff算法通过双端比较技术实现了高效的节点复用，而Vue3在此基础上引入了快速Diff和最长递增子序列算法，进一步提升了性能。两种算法各有优势，选择哪种取决于具体的应用场景和性能需求。
随着前端应用的复杂度不断提升，Vue3的优化策略为大型应用提供了更好的性能保障，而Vue2的稳定性和兼容性仍然使其在某些场景下具有不可替代的价值。
