虚拟 DOM 与 Diff 算法

虚拟 DOM (Virtual DOM) 是前端框架（如 Vue、React）的核心优化策略，而 Diff 算法则是虚拟 DOM 高效更新的关键。下面从原理到实现进行全面解析。

虚拟 DOM 基础概念

什么是虚拟 DOM？

虚拟 DOM 是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象表示。当应用状态变化时，框架会先在虚拟 DOM 上进行计算，最后以最小代价更新真实 DOM。

// 虚拟DOM的简化表示
const vnode = {
  tag: 'div',
  props: { id: 'app', class: 'container' },
  children: [
    { tag: 'h1', children: 'Hello Vue' },
    { tag: 'p', children: 'Virtual DOM Explained' }
  ]
}

为什么需要虚拟 DOM？

问题	虚拟 DOM 解决方案
直接操作 DOM 昂贵	减少直接 DOM 操作次数
手动优化困难	自动批量更新
跨平台渲染	抽象渲染层（Web/SSR/Native）

Diff 算法核心原理

Diff 算法用于比较新旧虚拟 DOM 树的差异，Vue 3 的 Diff 算法相比 Vue 2 有显著优化：

传统树 Diff 的复杂度

• 传统树比较算法（如 React 的递归 Diff）复杂度为 O(n³)
• Vue/React 通过启发式方法优化到 O(n)

Vue 3 的优化策略

优化点	描述	示例
静态提升	标记静态节点，跳过比较	<div>静态内容</div>
Patch Flag	二进制标记动态属性	{ class: 'active' } → 1
区块树	编译时分析动态结构	模板编译时确定动态区块

Diff 过程详解

同级节点比较

当新旧节点相同时（sameVnode），进入深度比较：

function sameVnode(a, b) {
  return (
    a.key === b.key && 
    a.tag === b.tag &&
    a.props?.class === b.props?.class
    // Vue 3 还会比较更多编译时信息
  )
}

核心 Diff 步骤

1. 头头比较：新旧头指针节点比较
2. 尾尾比较：新旧尾指针节点比较
3. 交叉比较：旧头 vs 新尾，旧尾 vs 新头
4. Key 映射：建立旧节点 key 到 index 的映射表

// 伪代码实现
while (oldStart <= oldEnd && newStart <= newEnd) {
  if (sameVnode(oldStart, newStart)) {
    patch(oldStart, newStart) // 递归比较子节点
    oldStart++
    newStart++
  } 
  else if (sameVnode(oldEnd, newEnd)) {
    patch(oldEnd, newEnd)
    oldEnd--
    newEnd--
  }
  // ...其他情况处理
}

Key 的重要性

• 无 key：依赖节点顺序，可能导致不必要的重建
• 有 key：精准匹配相同 key 的节点，最大化复用

错误用法：

<!-- 索引作为key无意义 -->
<div v-for="(item, index) in list" :key="index">

正确用法：

<div v-for="item in list" :key="item.id">

Vue 3 的优化手段

Patch Flags

编译时标记动态内容类型，运行时直接跳转处理：

// 编译生成的代码
const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "静态内容", -1 /* HOISTED */)

// 动态节点带有PatchFlag
_createVNode("div", { class: _ctx.dynamicClass }, null, 2 /* CLASS */)

静态提升 (Static Hoisting)

静态节点被提升到渲染函数外，避免重复创建：

// 编译前
<template>
  <div>静态标题</div>
  <div>{{ dynamicText }}</div>
</template>

// 编译后
const _hoisted_1 = /*#__PURE__*/_createVNode("div", null, "静态标题", -1 /* HOISTED */)

function render() {
  return [_hoisted_1, _createVNode("div", null, _ctx.dynamicText)]
}

区块树 (Block Tree)

模板编译时分析动态结构，生成优化后的区块：

// 编译时确定动态结构
const _block = _openBlock()
_createBlock("div", _ctx.dynamicProps, [
  _hoisted_1,
  _createVNode("p", null, _ctx.text)
])

性能对比示例

列表更新场景

旧列表: A - B - C - D
新列表: B - E - A - D

策略	操作次数	具体操作
无优化	4次	删除A、B、C，添加B、E、A、D
Vue 2 Diff	2次	移动B到头部，添加E
Vue 3 Diff	1次	仅添加E

Benchmark 数据

操作	Vue 2 (ms)	Vue 3 (ms)	提升
大型列表更新	120	45	62%
动态属性变更	30	8	73%

手动优化建议

1. 合理使用 key：唯一且稳定的键值

2. 避免深层嵌套：扁平化数据结构

3. 减少不必要的响应式：使用 shallowRef/markRaw

4. 利用 v-memo：缓存子树（Vue 3.2+）

   <div v-memo="[valueA, valueB]">
     <!-- 只有valueA或valueB变化时才更新 -->
   </div>