Vue 3 的 VNode 是一个轻量级 JavaScript 对象，精确描述 UI 结构与行为，核心字段包括 type（元素或组件）、props（属性与事件）、children（子内容）、key（Diff 标识）、ref、shapeFlag 和 patchFlag，为渲染器提供可比对、可更新的声明式蓝图。
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> 元素；
→ 带两个 class、一个点击事件、一个动态禁用状态；
→ 文本内容是 'Submit'；
→ 所有响应式依赖（如 isPending.value）会被自动收集，数据变时触发重新 h() 调用并比对更新。
它不关心怎么画，只声明“是什么”和“依赖什么”。真正的挂载、更新、卸载，由 Vue 渲染器基于这套结构完成——这就是声明式 UI 的底层支撑。
