VNode是什么？什么是虚拟 DOM？

VNode 和 虚拟 DOM 这两个概念是 Vue（以及 React 等现代框架）渲染机制的核心。

VNode 是什么？

VNode 全称是 Virtual Node，即虚拟节点。

• 它是一个 用 JavaScript 对象表示的 DOM 节点描述信息。

• Vue 在内部会把模板（template）编译成一棵 VNode 树。

• 每个 VNode 对象包含了这个节点的类型、属性、事件、子节点等信息。

举个例子

假设我们写了：

<div id="app" class="container">
  <span>Hello</span>
</div>

在 Vue 内部会被转成类似这样的 VNode 对象（简化版）：

const vnode = {
  tag: 'div',             // 标签名
  data: { id: 'app', class: 'container' }, // 属性
  children: [
    {
      tag: 'span',
      data: {},
      children: ['Hello'] // 子节点
    }
  ]
}

注意：这个 vnode 只是一个普通的 JavaScript 对象，并不是浏览器的 DOM 节点。

什么是虚拟 DOM？

虚拟 DOM（Virtual DOM）就是由一棵 VNode 树组成的一个对真实 DOM 结构的抽象表示。

• Vue 会用 VNode 树 来模拟真实 DOM 树。

• 更新时，它会比较新旧 VNode 树（diff 算法），只把差异部分更新到真实 DOM，而不是整个重新渲染。

流程示意

模板 → 编译器 → VNode 树 → 渲染器 → 真实 DOM

为什么要有虚拟 DOM？

原因一：直接操作 DOM 性能低

• 浏览器的 DOM 操作代价很高，频繁改动会引发重排（reflow）和重绘（repaint）。

• 如果每次数据变动都直接更新 DOM，性能会下降。

原因二：跨平台能力

• 虚拟 DOM 是纯 JS 对象，不依赖浏览器 DOM API。

• 可以输出到不同的目标环境：Web（HTML）、移动端（Weex）、甚至命令行界面。

原因三：统一管理更新逻辑

• Vue 可以在数据变化时，统一对比新旧虚拟 DOM，批量更新真实 DOM。

• 减少不必要的更新，提高性能。

diff 更新过程（简化版）

1. 数据变化 → 生成 新的 VNode 树

2. 将新的 VNode 树与旧的 VNode 树对比（diff）

3. 找出不同的部分（最小化更新集）

4. 仅更新这些不同的部分到 真实 DOM

这样避免了大规模的 DOM 重绘，提高了性能。

总结

概念	定义	作用
VNode	一个用 JS 对象描述 DOM 节点的结构	真实 DOM 的抽象表示
虚拟 DOM	由 VNode 组成的树	用于计算差异并高效更新真实 DOM