《Vue3 从入门到大神26篇》Virtual DOM 与 Diff 算法 —— Vue3 的高效更新机制-尧图网络科技

前言

这一篇我们来了解vue3高效更新机制的核心逻辑，很多人对 Virtual DOM（虚拟 DOM）有一个误解：

❌ “Virtual DOM 比原生 DOM 快。”

这是一个伪命题。

事实上，操作 Virtual DOM 本身也有成本，它之所以能提升性能，是因为：

它能计算出最小更新量，从而减少昂贵的 DOM 操作。

而 Vue3 的 Diff 算法，正是为了尽可能少地操作 DOM。

这一篇，我们系统讲解：

✅ 什么是 Virtual DOM
✅ VNode 的设计
✅ Vue3 的 Diff 策略
✅ 最长递增子序列（LIS）在 Diff 中的作用
✅ 为什么 Vue3 的 Diff 更快

一、为什么需要 Virtual DOM？

1️⃣ 原生 DOM 的问题

document.getElementById('app').innerHTML = ` <div> <p>${count}</p> <button>Click</button> </div> `

❌ 问题：

DOM 操作非常昂贵（重排、重绘）
每次更新都重新创建所有 DOM
无法复用已有 DOM

2️⃣ Virtual DOM 的核心思想

数据变化 ↓ 生成新的 Virtual DOM（JS 对象） ↓ Diff 对比新旧 VDOM ↓ 计算出最小变更 ↓ 只更新必要的真实 DOM

📌Virtual DOM 是“中间层”，不是“性能银弹”。

二、VNode：Virtual DOM 的基本单元

1️⃣ VNode 是什么？

interface VNode { type: string | object | null // 标签名 / 组件对象 props: Record<string, any> | null children: VNode[] | string | null el: HTMLElement | null // 对应的真实 DOM key?: string | number }

2️⃣ 一个真实 VNode 示例

const vnode = { type: 'div', props: { class: 'container' }, children: [ { type: 'p', props: null, children: 'Hello Vue3' } ], el: null }

3️⃣ h 函数：创建 VNode 的工具

function h(type, props, children) { return { type, props, children, el: null } } // 使用 h('div', { class: 'container' }, [ h('p', null, 'Hello Vue3') ])

📌Vue 模板编译后，最终都会变成h()调用。

三、Diff 算法：找出差异

1️⃣ Diff 的本质

给定两棵树（旧 VDOM 和新 VDOM），找出最小的修改操作。

这是一个经典的树编辑距离问题，理论上时间复杂度是O(n³)。

Vue 做了一个重要假设：

只比较同一层级的节点，不跨层级比较。

这样时间复杂度降到了O(n)。

2️⃣ Vue2 的双端 Diff

Vue2 使用的是双端比较算法：

旧：[a, b, c, d] 新：[b, c, e, d]

比较流程：

旧头 vs 新头
旧尾 vs 新尾
旧头 vs 新尾
旧尾 vs 新头

✅ 优点：逻辑直观

❌ 缺点：移动节点时不够高效

四、Vue3 的 Diff：更聪明的策略

Vue3 在双端比较的基础上，引入了最长递增子序列（LIS）优化。

1️⃣ 核心思路

1. 预处理：处理相同的前缀和后缀 2. 构建 key -> index 映射表 3. 找出最长不需要移动的节点序列 4. 只移动必要的节点

2️⃣ 示例：为什么要 LIS？

<!-- 旧 VDOM --> <ul> <li key="a">A</li> <li key="b">B</li> <li key="c">C</li> <li key="d">D</li> </ul> <!-- 新 VDOM --> <ul> <li key="b">B</li> <li key="c">C</li> <li key="e">E</li> <li key="d">D</li> </ul>

变化：

A 被删除
E 被插入
B、C、D 顺序变化

3️⃣ 最长递增子序列的作用

Vue3 会找出在新旧 VDOM 中相对位置不变的节点序列：

旧索引： [0, 1, 2, 3] (a, b, c, d) 新索引： [1, 2, 3, 0] (b, c, d, a) 最长递增子序列： [1, 2, 3] → 对应 b, c, d

📌结论：

b、c、d 这三个节点不需要移动，只需要移动其他节点。

五、LIS 算法简化实现

function getLIS(arr) { const dp = new Array(arr.length).fill(1) let maxLen = 1 for (let i = 1; i < arr.length; i++) { for (let j = 0; j < i; j++) { if (arr[i] > arr[j]) { dp[i] = Math.max(dp[i], dp[j] + 1) } } maxLen = Math.max(maxLen, dp[i]) } // 回溯构造 LIS const lis = [] for (let i = arr.length - 1; i >= 0; i--) { if (dp[i] === maxLen) { lis.unshift(i) maxLen-- } } return lis } // 示例 console.log(getLIS([1, 2, 3, 0])) // [0, 1, 2]

📌Vue3 使用的是 O(n log n) 的贪心算法版本，这里为了直观用了 O(n²)。

六、Vue3 Diff 的核心优势

对比项	Vue2	Vue3
比较策略	双端比较	双端 + LIS
移动节点	频繁移动	最小化移动
性能	较好	更好
复杂度	O(n)	O(n)，常数更小

📌Vue3 的 Diff 不是"更快"，而是"更少移动 DOM"。

七、PatchFlags 与 Diff 的关系

还记得第 22 篇讲的 PatchFlags 吗？

// 编译后的渲染函数 _createElementVNode("p", null, _toDisplayString(_ctx.count), 1 /* TEXT */)

📌PatchFlags 是 Diff 的上游优化：

PatchFlags 告诉 Diff：这个节点只有文本变化
Diff 就只更新文本内容，不再递归比较子节点

✅两者结合，效果翻倍。

八、手写一个简化的 Diff（理解版）

function diff(oldChildren, newChildren, container) { const oldKeyToIndex = {} oldChildren.forEach((child, i) => { oldKeyToIndex[child.key] = i }) const newIndices = new Array(newChildren.length).fill(-1) // 建立新节点到旧节点的映射 newChildren.forEach((child, i) => { const oldIndex = oldKeyToIndex[child.key] if (oldIndex !== undefined) { newIndices[i] = oldIndex } }) // 计算 LIS const lis = getLIS(newIndices) // 逆序遍历，移动节点 let j = lis.length - 1 for (let i = newChildren.length - 1; i >= 0; i--) { const newChild = newChildren[i] const oldIndex = newIndices[i] if (oldIndex === -1) { // 新增节点 mount(newChild, container) } else { if (i !== lis[j]) { // 需要移动 move(newChild, container) } else { // 不需要移动 j-- } } } }