javascript中的虚拟DOM如何实现_与真实DOM有何差异

虚拟 DOM 是用 JavaScript 对象模拟真实 DOM 的轻量级抽象，作为状态变更与真实 DOM 更新间的中间层；它本质是含标签、属性、子节点等信息的 JS 对象树，通过 diff 算法比对差异并 patch 批量更新真实 DOM，提升渲染性能。

虚拟 DOM 是用 JavaScript 对象模拟真实 DOM 结构的一种轻量级抽象，它本身不直接操作浏览器，而是作为状态变更与真实 DOM 更新之间的中间层，提升渲染性能。

虚拟 DOM 是什么：一个 JS 对象树

虚拟 DOM 本质是一个描述 DOM 节点的普通 JavaScript 对象（常称 VNode），包含标签名、属性、子节点、文本内容等关键信息。例如：

{
  tag: 'div',
  props: { className: 'box', id: 'app' },
  children: [
    { tag: 'span', children: ['Hello'] }
  ]
}

框架（如 React、Vue）在组件状态变化时，会基于最新数据生成一棵新的虚拟 DOM 树，而不是立刻修改真实 DOM。

如何实现：diff + patch 的核心流程

虚拟 DOM 的价值不在“存”，而在“比”和“更”。它的实现依赖两个关键步骤：

• Diff 算法：对比新旧两棵虚拟 DOM 树，找出最小差异（如节点增删、属性变更、文本更新）。为提升效率，主流框架默认只做同层比较（忽略跨层级移动），并借助 key 属性识别可复用的节点。
• Patch（打补丁）：将 diff 得到的差异批量应用到真实 DOM 上，比如调用 document.createElement、el.setAttribute、el.textContent = ... 等原生 API，但仅执行必要的操作。

与真实 DOM 的核心差异

两者定位不同，不是替代关系，而是协作关系：

• 执行环境不同：真实 DOM 运行在浏览器中，操作会触发样式计算、布局、重绘甚至重排；虚拟 DOM 是纯内存中的 JS 对象，创建/遍历/修改几乎无开销。
• 更新方式不同：直接操作真实 DOM（如频繁 innerHTML 或循环 appendChild）容易引发多次强制重排；虚拟 DOM 把多次变更聚合为一次高效更新，减少浏览器 Layout/Paint 次数。
• 不可直接交互：你不能对虚拟 DOM 调用 addEventListener 或读取 offsetHeight——它没有实际渲染、没有尺寸、没有事件系统。所有用户交互仍需通过真实 DOM 响应，框架内部会把事件委托到根节点并映射回虚拟结构。

注意：虚拟 DOM 不是银弹

它适合中高频更新的 UI 场景（如表单联动、实时列表），但也会带来额外内存占用和 diff 计算成本。简单静态页面或极低频更新场景下，直接操作真实 DOM 反而更高效。现代框架也在优化：React 18 的并发渲染、Vue 3 的编译时静态提升和更细粒度的响应式追踪，都在弱化对通用 diff 的依赖。