VNode 是 Vue 中用 JavaScript 对象描述真实 DOM 的轻量抽象，包含 type、props、children、key 等核心字段，支撑声明式渲染、高效 diff 和跨平台复用。
VNode 是 Vue 渲染系统的底层数据结构，它不是 DOM，也不是模板字符串，而是一个轻量、纯粹、可序列化的 JavaScript 对象，用来精确描述“想要什么节点”，而不是“怎么画出来”。它的存在让 Vue 能在不依赖平台的前提下完成创建、比对、更新和跨端输出。
VNode 的核心字段与语义含义
VNode 接口虽在不同 Vue 版本略有差异，但关键字段职责稳定：
- type：决定节点本质——是 'div' 还是组件构造函数，或是 Fragment/Text/Comment 等内置类型；它是 VNode 分类的唯一依据
- props：携带所有声明式信息，包括 class、style、事件监听器（onXxx）、自定义属性等；事件名自动转为小写并绑定原生监听
- children：支持字符串、数组、null 或其他 VNode，统一归一化为 VNodeNormalizedChildren，便于递归处理
- key：仅用于列表渲染时的 diff 定位，无 key 时 Vue 按顺序就地复用，有 key 则按标识移动/复用/销毁
- shapeFlag 和 patchFlag：位运算标记，分别标识节点大类（组件/元素/文本）和细粒度更新线索（如 class 动态、样式动态、仅子节点变化），驱动 patch 阶段跳过冗余比对
五类基础 VNode 及其典型生成方式
根据 type 字段值，VNode 可划分为以下五种基本形态：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 元素节点：type 为字符串（如 'section'、'svg:circle'），由 h('div', { id: 'box' }, [...]) 直接生成
- 组件节点：type 为组件对象（如 defineComponent({ setup() { return () => h('span') } })），h(MyButton, { size: 'large' }) 即创建一个组件 VNode
- 文本节点：type 为全局常量 Text（Vue 内部 Symbol），通常作为 children 出现在元素或组件中，如 h('p', null, 'Hello')
- 注释节点：type 为 Comment，对应模板中 <!-- loading -->，其 children 为空字符串，isComment 为 true
- Fragment 节点：type 为 Fragment，无真实 DOM 对应，用于多根组件模板（如 <template><h1>A</h1><p>B</p></template>）
从 VNode 到真实视图：patch 的三阶段流程
Vue 不直接操作 DOM，而是通过 renderer 的 patch 函数协调新旧 VNode 树：
立即学习“前端免费学习笔记（深入）”；
- 挂载（mount）：首次渲染时，遍历新 VNode 树，调用 host.createElement、host.appendChild 等平台接口，逐层构建真实节点
- 比对（diff）：新旧 VNode 树同层比较，利用 key + patchFlag 快速定位变更类型（新增、删除、属性更新、子节点重排等）
- 打补丁（patch）：仅对差异部分调用 host API，如 host.setAttribute、host.setText、host.insertBefore，避免整树重绘
跨平台能力的根源：VNode 与 host 的解耦设计
VNode 本身不含任何平台逻辑，它只负责“描述”。真正实现 Web/iOS/Android/Canvas 渲染的，是一组可替换的 host 配置对象：
- Web 平台 host 提供 document.createElement、el.classList.add 等 DOM 方法
- iOS 平台 host 提供 UIButton.alloc().init()、view.addSubview() 等 UIKit 方法
- 只要实现 createElement、insertBefore、setAttribute、addEventListener 等约 10 个核心方法，createRenderer(host) 就能产出对应平台的渲染器
- 组件代码完全不变， 在各端自动映射为 button / UIButton / MaterialButton
