VNode 是 Vue 中用 JavaScript 对象描述 DOM 的轻量抽象，包含 tag、data、children、text 等核心字段，用于声明式渲染、跨平台复用和开发者可控的 UI 构建。
Vue 中的 VNode（Virtual Node）本质上是一个用 JavaScript 对象描述真实 DOM 节点的结构化数据。它不是 DOM 本身，而是对 DOM 的轻量、可序列化、可操作的抽象表示——理解它，就等于摸清了 Vue 渲染系统的核心入口。
VNode 长什么样？一个最简对象示例
你可以把它想象成 DOM 元素的“JSON 化快照”。比如这段 HTML：
`Hello
World
对应的核心 VNode 对象大致长这样（简化版）：
`{tag: 'div',
data: { attrs: { id: 'app' }, staticClass: 'container' },
children: [
{ tag: 'h1', text: 'Hello' },
{ tag: 'p', data: { directives: [{ name: 'show', value: visible }] }, text: 'World' }
]
}`
注意：这里没有 document.createElement，也没有 appendChild——只有纯对象字段，描述“该节点是什么、带什么属性、包含什么子内容、受哪些指令影响”。
立即学习“Java免费学习笔记（深入）”；
Zenlink - Node SDK for ZenHeart
下载
ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw，涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。
VNode 的关键字段，每个都对应真实渲染逻辑
一个标准 VNode 对象通常包含以下核心字段，它们共同决定最终如何生成或更新 DOM：
- tag：字符串，如 'div'、'span' 或组件名（如 'MyButton'），决定创建哪种节点；为 undefined 或 '!' 时代表注释/空节点
- data：对象，封装所有“非子内容”的元信息——包括 class/style/attrs/props/directives/on（事件）等；Vue 内部靠它驱动响应式更新和指令逻辑
- children：数组，元素是子 VNode（可以是普通标签、文本节点、组件 VNode，甚至函数式组件返回的 VNode）；文本节点用 text 字段表示（如 { text: 'Hello' }）
- text：仅当是纯文本节点时存在，值为字符串；此时 tag、children 均为 undefined
- elm：Vue 渲染后挂载的真实 DOM 元素引用（只在挂载后存在，VNode 初始创建时不含此字段）
手写一个 VNode 并手动渲染（不依赖 Vue）
下面用原生 JS 演示如何从 VNode 对象生成真实 DOM，帮助你建立直观认知：
`function createElement(vnode) {if (vnode.text !== undefined) {
return document.createTextNode(vnode.text);
}
const el = document.createElement(vnode.tag);
if (vnode.data && vnode.data.attrs) {
Object.keys(vnode.data.attrs).forEach(key => {
el.setAttribute(key, vnode.data.attrs[key]);
});
}
if (vnode.children) {
vnode.children.forEach(child => {
el.appendChild(createElement(child));
});
}
return el;
}
// 使用示例
const myVNode = {
tag: 'div',
data: { attrs: { id: 'demo' } },
children: [
{ tag: 'span', text: 'Click me' }
]
};
document.body.appendChild(createElement(myVNode));`
这个简易函数没处理事件、指令、diff 等高级能力，但它清晰展示了 VNode 如何成为 DOM 创建的“蓝图”——Vue 的 patch 过程正是这个思路的工业级实现。
为什么 Vue 不直接操作 DOM？VNode 的真实价值
直接操作 DOM 效率低、难以追踪变化、无法跨平台。VNode 解决了三个关键问题：
- 声明式映射：模板或 render 函数输出 VNode，Vue 只需比对新旧 VNode 差异（diff），再精准更新 DOM，避免全量重绘
- 运行时无关性：VNode 是纯对象，可在服务端渲染（SSR）、Weex、小程序等不同环境复用同一套虚拟树逻辑
-
开发者可干预性：通过
render函数、JSX、或自定义h()调用，你能完全控制 VNode 的生成过程，实现高度动态的 UI 构建
它不是黑盒，而是一层透明、可控、可调试的中间表示——你看得懂，也能亲手造一个。
