Vue 3 的 VNode 数据结构是如何描述 UI 的？-Vue.js-PHP中文网

vue 3 的 vnode 是一个轻量级 javascript 对象，精确描述 ui 结构与行为，核心字段包括 type（元素或组件）、props（属性与事件）、children（子内容）、key（diff 标识）、ref、shapeflag 和 patchflag，为渲染器提供可比对、可更新的声明式蓝图。

vue 3 的 vnode 数据结构是如何描述 ui 的？

Vue 3 的 VNode（虚拟节点）用一个轻量级 JavaScript 对象，直接、精确地描述 UI 的结构与行为，不操作真实 DOM，而是为后续渲染器提供可比对、可更新的“蓝图”。

它不是抽象概念，而是一个有明确字段约定的对象，核心字段包括：

type：节点类型
可以是字符串（如 'div'、'input'），表示原生 HTML 元素；
也可以是组件对象（如 { setup() { return () => h('span', 'Hello') } } 或 defineComponent({}) 的结果）；
还支持异步组件、函数式组件、甚至 Fragment（用 Symbol.for('v-fgt') 表示）。
props：节点的属性与交互配置
包含 HTML 属性（id, class, style）、组件 props（msg: 'hi'）、事件监听器（注意命名规范：onClick, onInput, onUpdate:modelValue）；
事件必须用 on + 驼峰 形式，且值为函数；
class 和 style 支持对象、数组等多种写法，Vue 内部会自动合并。
children：子内容
可以是字符串（文本节点）、单个 VNode、VNode 数组（多个子节点）、或插槽对象（如 { default: [...], header: h('h2', 'Title') }）；
空内容可传 null、undefined 或空数组 []，Vue 渲染器会正确处理。
其他关键字段（内部使用为主，但影响行为）
key：用于 Diff 时识别节点身份，避免错误复用；
ref：绑定响应式引用，便于访问 DOM 或组件实例；
shapeFlag：位运算标记（如是否为组件、是否含文本、是否为 Fragment），供渲染器快速分支判断；
patchFlag：编译器注入的优化提示（如 TEXT、PROPS），告诉 Diff 哪些部分可能变化，跳过静态比对。

vue-component-analyzer
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

VNode 描述 UI 的本质，是把“要渲染什么”转化为可序列化、可编程、可响应式追踪的数据结构。比如：

h('button', {
  class: 'btn primary',
  onClick: handleClick,
  disabled: isPending.value
}, 'Submit')

这段代码生成的 VNode，就完整表达了：
→ 一个 <button></button> 元素；
→ 带两个 class、一个点击事件、一个动态禁用状态；
→ 文本内容是 'Submit'；
→ 所有响应式依赖（如 isPending.value）会被自动收集，数据变时触发重新 h() 调用并比对更新。

它不关心怎么画，只声明“是什么”和“依赖什么”。真正的挂载、更新、卸载，由 Vue 渲染器基于这套结构完成——这就是声明式 UI 的底层支撑。