4.1 虚拟 DOM 与 diff 算法

4.1 虚拟 DOM 与 diff 算法

本节摘要：虚拟 DOM 是一棵描述界面的轻量 JavaScript 对象树，diff 是新旧两棵树的比对算法，patch 是比对结果在真实 DOM 上的执行。本节用可运行的简化实现拆开这三个词，解释"同层比较"启发式的合理性边界，澄清"虚拟 DOM 一定快"的常见误解。

学习目标

阅读完本节，你应当能够：

1. 手写最小 vnode 与 patch 函数，说清每个分支的取舍；
2. 解释为什么完整树 diff 是平方级而同层策略降到线性；
3. 说明静态子树跳过、组件更新边界两个真实优化点；
4. 有依据地回答"虚拟 DOM 到底快不快"。

一、先看 vnode 长什么样

剥掉所有枝叶，一个虚拟节点就是这样的对象：

// <ul class="list"><li>{{ msg }}</li></ul> 的极简 vnode
{
  tag: 'ul',
  data: { class: 'list' },          // 属性、事件、指令都收在 data
  children: [
    {
      tag: 'li',
      data: {},
      children: [
        { tag: null, text: '你好' } // 文本节点：tag 为空、text 有值
      ]
    }
  ],
  el: null,   // 对应真实 DOM 的引用——补丁落地后的回填
  key: null   // 列表比对时的身份证，下一节主角
}
​

三个要点：它是纯数据，创建一个对象的成本远低于创建一个真实 DOM 节点；它持有 el 引用，diff 时据此把变更落到真实节点；真实框架里还有 component、slots、动态标志等字段，骨架不变。

用 createElement 的极简版感受产物形态：

function h(tag, data, children) {
  return { tag, data, children, key: data && data.key, el: null };
}

const oldTree = h('div', { class: 'box' }, [
  h('h1', {}, ['标题']),
  h('p',  {}, ['旧内容'])
]);
​

二、patch 的分支逻辑

新旧两棵树怎么比？先看单节点的决策，再看树的遍历。

function patch(oldVnode, newVnode) {
  // 分支一：标签不同，无法复用，直接替换整棵子树
  if (oldVnode.tag !== newVnode.tag) {
    const parent = oldVnode.el.parentNode;
    parent.removeChild(oldVnode.el);
    parent.appendChild(createRealDom(newVnode));
    return;
  }
  // 分支二：同为文本节点，直接改文本
  if (oldVnode.tag === null) {
    if (oldVnode.text !== newVnode.text) {
      oldVnode.el.textContent = newVnode.text;
    }
    return;
  }
  // 分支三：标签相同，复用真实 DOM，只比属性和孩子
  newVnode.el = oldVnode.el;
  patchProps(oldVnode.el, oldVnode.data, newVnode.data); // 逐属性比增删改
  patchChildren(oldVnode, newVnode); // 最复杂的部分，下一节展开
}
​

树级遍历采用同层比较 + 深度优先：只比同一层级的兄弟之间，比完一层再往下钻。为什么不做跨层移动匹配？算一笔账：两棵各有 n 个节点的树做任意的跨层最优匹配，代价是平方级起步；而真实交互产生的更新——点了个按钮、输入了文字——几乎都落在同层局部。Vue 付出"跨层移动会被当成删除加新建"的代价，换来线性复杂度。这是一次典型的工程取舍：接受少数场景变慢，保证常见场景便宜且行为可预测。

diff 的分层决策与跳过优化

三、两个真实的跳过优化

静态子树跳过。 第 3 章编译阶段标记的静态节点在此兑现：新旧两节点都带静态标记时，patch 直接 return，连属性比对都省。一个大型页面里导航、页脚、装饰性区块往往占大半节点数，这部分在每次更新里是零成本。

组件更新边界。 遇到组件 vnode 时，diff 只比较 props 是否变化；props 引用未变（且组件没有被强制更新）就可以跳过该组件整棵子树的重新渲染。组件树越深，这个边界的收益越大——这也是为什么"合理的组件拆分"本身就是性能手段：拆出了更多可跳过的边界。

四、"虚拟 DOM 更快"是个误解

值得正面澄清：精心手写的原生 DOM 操作，几乎总是快于虚拟 DOM——你直接改目标节点，没有建树、比对的开销。虚拟 DOM 的真实价值有三条：

1. 把同步逻辑从人挪给机器。手写更新要求你穷举"哪种数据变化要改哪些节点"，状态一多必然漏。虚拟 DOM 声明式描述结果，正确性由框架保证；
2. 批量与最小化。一次交互引发的数据变更统一 diff 后打补丁，不会出现连环式多次 DOM 抖动；
3. 跨渲染目标。vnode 是纯数据，渲染到浏览器 DOM、原生组件（Weex/uni-app）、canvas 都只是换一个渲染后端。

Solid、Svelte 这类无虚拟 DOM 框架的崛起也说明：虚拟 DOM 是一种平衡选择而非终极形态。Vue 3 的应对不是抛弃它，而是用编译信息（补丁标志、静态提升）不断削薄它的运行时成本——第 10 章见分晓。

五、动手验证同层策略

一个十行实验，直观看到"跨层移动等于删除加新建"：

<div id="box">
  <p v-if="layout === 'a'"><span>内容</span></p>
  <div v-else><span>内容</span></div>
</div>
​

切换 layout 时，虽然 span 在两个分支里"看起来一样"，但它的父节点从 p 变成了 div，同层比较发现标签不同，整棵子树销毁重建——span 里的 input 值会丢。把 span 换成带 key 也不解决，因为 key 只在同一位置的同级列表里生效。这个实验能纠正很多人对复用范围的过度想象。

本节要点回顾

• vnode 是纯数据：创建便宜、可 diff、可跨端，el 字段回填真实节点引用；
• patch 三分支：标签不同整树替换、文本直接改、标签相同复用后比属性与孩子；
• 同层取舍：放弃跨层匹配换来线性复杂度，跨层移动按删除加新建处理；
• 两个跳过：静态子树编译期标记免比对，组件 props 未变整棵子树免渲染；
• 祛魅：虚拟 DOM 赢在正确性与可维护性，绝对速度不是它的卖点。

列表是 diff 里唯一需要"身份识别"的场景，下一节把 key 讲透。