Vue2与Vue3虚拟DOM和Diff算法对比分析
虚拟DOM实现
Vue2 VNode实现
// Vue2 VNode结构示例
class VNode {
constructor(tag, data, children, text, elm, context) {
this.tag = tag // 标签名
this.data = data // 节点数据，包含属性、指令等
this.children = children // 子节点数组
this.text = text // 文本内容
this.elm = elm // 对应的真实DOM节点
this.context = context // 组件实例上下文
}
}
// 创建VNode示例
const vnode = new VNode(
'div',
{ attrs: { id: 'app' }, on: { click: handler } },
[
new VNode('span', null, [], 'Hello'),
new VNode('span', null, [], 'Vue2')
],
null,
null,
context
)
主要特点
- 扁平化的VNode设计
- 所有属性都在同一层级
- 结构简单，易于理解和操作
- 全量Diff比较
- 每次更新都需要遍历整个虚拟DOM树
- 双端比较算法
- 通过四个指针优化节点的比较和移动
Vue3 VNode实现
// Vue3 VNode结构示例
const vnode = {
type: 'div', // 节点类型
props: { // 属性集合
id: 'app',
onClick: handler
},
children: [ // 子节点
{ type: 'span', children: 'Hello' },
{ type: 'span', children: 'Vue3' }
],
shapeFlag: ShapeFlags.ELEMENT, // 节点类型标记
patchFlag: PatchFlags.PROPS, // 更新标记
dynamicProps: ['onClick'] // 动态属性列表
}
// PatchFlags示例
const PatchFlags = {
TEXT: 1, // 动态文本节点
CLASS: 2, // 动态class
STYLE: 4, // 动态style
PROPS: 8, // 动态属性
FULL_PROPS: 16, // 有动态key属性
HYDRATE_EVENTS: 32,// 有事件监听器
STABLE_FRAGMENT: 64,// 稳定序列，子节点顺序不会改变
KEYED_FRAGMENT: 128,// 子节点有key
UNKEYED_FRAGMENT: 256,// 子节点没有key
NEED_PATCH: 512, // 非class/style动态属性
DYNAMIC_SLOTS: 1024,// 动态插槽
DEV_ROOT_FRAGMENT: 2048,// 仅供开发环境使用
HOISTED: -1, // 静态节点，永远不需要更新
BAIL: -2 // 差异算法要退出优化模式
}
主要特点
- 更轻量的VNode设计
- 扁平化的属性结构
- 更少的运行时开销
- 引入Block Tree
- 收集动态节点
- 优化更新性能
- PatchFlag优化
- 精确标记动态内容
- 减少不必要的比较
- 静态提升
- 将静态节点提升到渲染函数外
- 避免重复创建
- 事件缓存
- 缓存事件处理函数
- 减少不必要的更新
Diff算法对比
Vue2 Diff算法
双端比较算法
// Vue2列表更新的Diff算法实现
function updateChildren(parentElm, oldCh, newCh) {
let oldStartIdx = 0, newStartIdx = 0
let oldEndIdx = oldCh.length - 1
let newEndIdx = newCh.length - 1
let oldStartVnode = oldCh[0]
let oldEndVnode = oldCh[oldEndIdx]
let newStartVnode = newCh[0]
let newEndVnode = newCh[newEndIdx]
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (sameVnode(oldStartVnode, newStartVnode)) {
// 头部节点相同
patchVnode(oldStartVnode, newStartVnode)
oldStartVnode = oldCh[++oldStartIdx]
newStartVnode = newCh[++newStartIdx]
} else if (sameVnode(oldEndVnode, newEndVnode)) {
// 尾部节点相同
patchVnode(oldEndVnode, newEndVnode)
oldEndVnode = oldCh[--oldEndIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldStartVnode, newEndVnode)) {
// 旧头和新尾相同
patchVnode(oldStartVnode, newEndVnode)
moveVnode(oldStartVnode, parentElm, oldEndVnode.elm.nextSibling)
oldStartVnode = oldCh[++oldStartIdx]
newEndVnode = newCh[--newEndIdx]
} else if (sameVnode(oldEndVnode, newStartVnode)) {
// 旧尾和新头相同
patchVnode(oldEndVnode, newStartVnode)
moveVnode(oldEndVnode, parentElm, oldStartVnode.elm)
oldEndVnode = oldCh[--oldEndIdx]
newStartVnode = newCh[++newStartIdx]
} else {
// 四种假设都不满足，遍历查找
let idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
if (idxInOld >= 0) {
let vnodeToMove = oldCh[idxInOld]
patchVnode(vnodeToMove, newStartVnode)
moveVnode(vnodeToMove, parentElm, oldStartVnode.elm)
oldCh[idxInOld] = undefined
} else {
// 创建新节点
createElm(newStartVnode, parentElm, oldStartVnode.elm)
}
newStartVnode = newCh[++newStartIdx]
}
}
}
// 判断两个节点是否相同
function sameVnode(a, b) {
return a.key === b.key && a.tag === b.tag
}
工作流程：
- 从两端向中间比较
- 使用四个指针分别指向新旧子节点的头尾
- 在每一轮比较中尝试四种假设性匹配
- 四种假设性比较
- 新头和旧头比较
- 新尾和旧尾比较
- 新头和旧尾比较
- 新尾和旧头比较
- 找不到匹配则遍历查找
- 在旧节点中查找与新头节点具有相同key的节点
- 如果找到则移动该节点
- 如果没找到则创建新节点
Vue3 Diff算法
快速Diff算法
// Vue3列表更新的快速Diff算法实现
function fastDiff(oldChildren, newChildren, container) {
// 1. 预处理：处理相同的前置/后置节点
let j = 0
let oldVNode = oldChildren[j]
let newVNode = newChildren[j]
// 处理前置节点
while (oldVNode && newVNode && oldVNode.key === newVNode.key) {
patch(oldVNode, newVNode, container)
j++
oldVNode = oldChildren[j]
newVNode = newChildren[j]
}
oldVNode = oldChildren[oldChildren.length - 1]
newVNode = newChildren[newChildren.length - 1]
// 处理后置节点
while (oldVNode && newVNode && oldVNode.key === newVNode.key) {
patch(oldVNode, newVNode, container)
oldVNode = oldChildren[--oldChildren.length - 1]
newVNode = newChildren[--newChildren.length - 1]
}
// 2. 处理剩余节点
if (j > oldChildren.length) {
// 挂载新节点
for (let i = j; i < newChildren.length; i++) {
patch(null, newChildren[i], container)
}
} else if (j > newChildren.length) {
// 卸载多余节点
for (let i = j; i < oldChildren.length; i++) {
unmount(oldChildren[i])
}
} else {
// 3. 构建最长递增子序列
const count = newChildren.length - j
const source = new Array(count).fill(-1)
const oldStart = j
const newStart = j
let moved = false
let pos = 0
let patched = 0
// 构建索引表
const keyIndex = {}
for (let i = newStart; i < newChildren.length; i++) {
keyIndex[newChildren[i].key] = i
}
// 更新和移动节点
for (let i = oldStart; i < oldChildren.length; i++) {
const oldVNode = oldChildren[i]
if (patched < count) {
const k = keyIndex[oldVNode.key]
if (typeof k !== 'undefined') {
const newVNode = newChildren[k]
patch(oldVNode, newVNode, container)
source[k - newStart] = i
if (k < pos) {
moved = true
} else {
pos = k
}
patched++
} else {
unmount(oldVNode)
}
} else {
unmount(oldVNode)
}
}
if (moved) {
// 获取最长递增子序列
const seq = getSequence(source)
let s = seq.length - 1
let i = count - 1
for (i; i >= 0; i--) {
if (source[i] === -1) {
// 挂载新节点
const pos = i + newStart
const newVNode = newChildren[pos]
patch(null, newVNode, container)
} else if (i !== seq[s]) {
// 移动节点
const pos = i + newStart
const newVNode = newChildren[pos]
const nextPos = pos + 1
const anchor = nextPos < newChildren.length
? newChildren[nextPos].el
: null
move(newVNode, container, anchor)
} else {
s--
}
}
}
}
}
// 最长递增子序列算法
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 !== -1) {
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
}
}
}
return result
}
优化策略：
- 静态标记（PatchFlag）
- 动态节点收集
- 最长递增子序列算法
Diff算法流程图
上图展示了Vue2双端比较算法和Vue3快速Diff算法的工作流程对比。
性能优化对比
Vue2性能优化
-
组件级别优化
- shouldComponentUpdate：避免不必要的更新
// 组件更新优化示例 export default { name: 'TodoItem', props: ['todo'], shouldComponentUpdate(nextProps) { return this.todo.id !== nextProps.todo.id || this.todo.text !== nextProps.todo.text } }- v-once指令：一次性渲染优化
<!-- 静态内容只会渲染一次 --> <h1 v-once>{{ title }}</h1> -
编译优化
- 静态节点提取：将静态内容提升到渲染函数外
// 编译优化示例 const staticContent = createVNode('div', { class: 'static' }, 'Static Content') function render() { return createVNode('div', null, [ staticContent, // 复用静态节点 createVNode('div', null, this.dynamicContent) ]) }- 事件缓存：避免重复创建函数
Vue3性能优化
-
编译优化
- 静态提升：将静态内容提升到渲染函数外
// 编译前 function render() { return createVNode('div', null, [ createVNode('span', null, 'Static'), createVNode('span', null, this.dynamic) ]) } // 编译后 const hoisted = createVNode('span', null, 'Static') function render() { return createVNode('div', null, [ hoisted, createVNode('span', null, this.dynamic) ]) }- 补丁标记（PatchFlag）：精确标记动态内容
// 编译结果示例 createVNode('div', null, [ createVNode('span', { class: 'title' }, 'Static'), createVNode('span', { class: dynamic }, text, PatchFlags.CLASS), // 仅class需要更新 createVNode('span', props, text, PatchFlags.PROPS | PatchFlags.TEXT) // props和text都需要更新 ])- 树结构打平（Block Tree）：收集动态节点
// Block Tree示例 const block = createBlock('div', null, [ createVNode('span', null, 'Static'), createVNode('span', null, text, PatchFlags.TEXT), // 动态节点被收集到Block中 createBlock('div', null, dynamicChildren) ])- 事件监听缓存：缓存事件处理函数
// 编译前 createVNode('button', { onClick: () => console.log('click') }) // 编译后 const handler = cache(() => console.log('click')) createVNode('button', { onClick: handler }) -
静态分析
- 静态节点提升：减少创建开销
- 静态属性提升：减少比对开销
- SSR优化：服务端渲染性能提升
性能测试数据
大数据列表渲染（10000条数据）
// 测试数据
const items = Array(10000).fill(0).map((_, i) => ({
id: i,
text: `Item ${i}`,
value: Math.random()
}))
| 指标 | Vue2 | Vue3 | 性能提升 |
|---|---|---|---|
| 首次渲染 | 1200ms | 600ms | 50% |
| 更新渲染 | 800ms | 200ms | 75% |
| 内存占用 | 32MB | 16MB | 50% |
静态内容优化
| 场景 | Vue2 | Vue3 | 性能提升 |
|---|---|---|---|
| 大量静态节点 | 需要每次创建 | 一次性创建 | 约40% |
| 静态属性 | 需要比对 | 跳过比对 | 约30% |
| 事件处理 | 重复创建 | 缓存复用 | 约20% |
优缺点对比
Vue2
优点：
- 算法稳定，可预测性强
- 实现相对简单
缺点：
- Diff性能不够理想
- 没有静态标记
- 全量比较开销大
Vue3
优点：
- 更快的Diff算法
- 更少的内存占用
- 更好的静态内容处理
- 更优的编译优化
缺点：
- 实现复杂度增加
- 代码体积略有增加
最佳实践
Vue2最佳实践
- 使用v-once处理静态内容
- 合理使用key
- 避免不必要的节点层级
Vue3最佳实践
- 利用PatchFlag特性
- 合理使用静态提升
- 使用Block优化
总结
Vue3在虚拟DOM和Diff算法方面做了重大改进，通过引入PatchFlag、Block Tree等优化手段，显著提升了性能。相比Vue2的双端比较算法，Vue3的快速Diff算法在处理大规模更新时表现更好。同时，Vue3的静态提升和编译优化也为运行时性能带来了显著提升。
