VNode 体系全总结：从节点定义到跨端渲染，通关 Vue 渲染机制的基石-Vue.js-PHP中文网

vnode 是 vue 中用 javascript 对象描述真实 dom 的轻量抽象，包含 type、props、children、key 等核心字段，支撑声明式渲染、高效 diff 和跨平台复用。

vnode 体系全总结：从节点定义到跨端渲染，通关 vue 渲染机制的基石

VNode 是 Vue 渲染系统的底层数据结构，它不是 DOM，也不是模板字符串，而是一个轻量、纯粹、可序列化的 JavaScript 对象，用来精确描述“想要什么节点”，而不是“怎么画出来”。它的存在让 Vue 能在不依赖平台的前提下完成创建、比对、更新和跨端输出。

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 阶段跳过冗余比对

根据 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，对应模板中，其 children 为空字符串，isComment 为 true
Fragment 节点：type 为 Fragment，无真实 DOM 对应，用于多根组件模板（如）

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 本身不含任何平台逻辑，它只负责“描述”。真正实现 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

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！