虚拟 DOM 设计思想深度解析

一句话概括

虚拟 DOM 是一棵用 JS 对象描述的”影子 DOM 树”——它站在真实 DOM 和框架之间，通过 diff 算出最小变更再一次性写入页面。它的价值不是”比手动操作 DOM 更快”，而是”让你用声明式代码写 UI，框架自动产出接近手写优化的 DOM 更新”。

核心知识点

1. 虚拟 DOM 的本质——一棵 JS 对象树

// 真实 HTML：<div id="app" class="box"><span>hello</span><span>world</span></div>

// 对应的虚拟 DOM：
const vnode = {
  type: 'div',
  props: { id: 'app', class: 'box' },
  children: [
    { type: 'span', props: null, children: 'hello' },
    { type: 'span', props: null, children: 'world' }
  ]
};

// 为什么是 JS 对象？因为 JS 创建和比较对象比操作真实 DOM 快 2-3 个数量级
// 1000 次对象 diff < 1 次批量 DOM 更新

2. 三大框架的三种路径

// Vue 3：模板编译优化 + 运行时虚拟 DOM
// 编译阶段就能标记静态节点，diff 时直接跳过
<div>
  <span>我是静态的——编译期打标，不参与 diff</span>
  <span>{{ dynamic }}</span>  // 只有这行参与 diff
</div>

// React：纯运行时，无编译优化，全量 diff
// 所有节点一视同仁地走 reconciliation

// Svelte：无虚拟 DOM，编译期直接把模板编译成精确的 DOM 操作指令
// 没有运行时 diff 开销，但模板越复杂编译产物越大

3. h 函数——创建 VNode 的入口

import { h } from 'vue';

const vnode = h('div', { class: 'container' }, [
  h('span', null, '第一行'),
  h('span', null, '第二行')
]);

// 等价于模板：<div class="container"><span>第一行</span><span>第二行</span></div>
// h(tag, props, children) —— 三个参数，永久不变

4. 初始渲染——VNode → 真实 DOM

function mount(vnode, container) {
  const el = document.createElement(vnode.type);

  // 设置属性
  for (const [key, val] of Object.entries(vnode.props || {})) {
    if (key.startsWith('on')) {
      el.addEventListener(key.slice(2).toLowerCase(), val);  // 事件
    } else {
      el.setAttribute(key, val);  // 普通属性
    }
  }

  // 递归处理子节点
  if (typeof vnode.children === 'string') {
    el.textContent = vnode.children;
  } else if (Array.isArray(vnode.children)) {
    vnode.children.forEach(child => mount(child, el));
  }

  container.appendChild(el);
}

5. 虚拟 DOM 的真正价值——不是”更快”，是”更对”

// 没有虚拟 DOM：需要手动维护 DOM 状态
el.innerHTML = '';
list.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  el.appendChild(li);
}); // 全量重建——简单但浪费

// 有虚拟 DOM：
list.value = newData;
// 框架自动 diff：只移动变了的 li，没变的原地复用
// 你在写声明式代码时不需要关心"怎么改 DOM"

一句话定位： 虚拟 DOM 不是性能天花板（手写 innerHTML 在某些场景反而更快），它是”在声明式开发中提供可接受的自动化性能“——让你不用每改一行数据就想”我怎么操作 DOM 最高效”。

其实你每天都在用

• 列表排序： list.sort() → diff 找到最长递增子序列 → 只移动必要节点，其余原地不动
• v-if 切换： 条件从 true 切 false → 虚拟 DOM 算出”这个节点该卸载” → 精准移除真实 DOM
• v-show 切换： VNode 还在，只是加了个 display:none → diff 跳过整块节点
• key 属性： v-for="item in list" :key="item.id" → diff 通过 key 精确定位旧节点 → 列表重排时复用而非重建
• Transition 动画： VNode 离开时打上 leaving 标记 → patch 把卸载延迟到动画结束

常见误解（FAQ）

• ❌ 误区：「虚拟 DOM 一定比手动操作 DOM 快」 不是。单个 textContent 修改，手动操作可能比走完整 diff 流程更快。虚拟 DOM 的定位是”在声明式开发中提供可接受的性能”，不是”性能上限”。

• ❌ 误区：「Vue 的虚拟 DOM 和 React 一样」 不一样。Vue 3 有编译期优化——静态提升（hoistStatic）、PatchFlags、block tree——在模板编译阶段就打好了哪些节点是静态的标记，diff 时直接跳过。React 没有编译期，纯靠 Fiber 调度来分摊 diff 开销。

• ❌ 误区：「key 是给开发者看的，不影响质量」 key 是 diff 算法的核心输入。没有 key（或用 index 当 key），列表重排时 diff 会”就地复用”——input 输入的内容会串到错误的位置。key = 唯一 id 时 diff 才能判断”这是同一条数据，移动一下即可”。

• ❌ 误区：「虚拟 DOM 是 Vue 发明的」 React 在 2013 年最早推广虚拟 DOM，Vue 2 在 2016 年引入。现在这个模式已成为前端框架共识——Flutter、SwiftUI、Jetpack Compose 都有类似概念，只是叫法不同。

一句话总结

虚拟 DOM 的本质 = JS 对象树充当 DOM 的影子——声明式写 UI → 框架 diff 找到最小变更 → 批量写入真实 DOM。它不是银弹，它是让你不用为每个数据变更手动维护 DOM 状态的工程选择。