Vue虚拟DOM是一棵由VNode构成的纯JavaScript树形结构，作为真实DOM的轻量级内存映射，通过render→diff→patch三步实现高效局部更新：先生成新VNode树，再同层比对差异，最后仅操作真实DOM中变更部分。
Vue 的虚拟 DOM 树是一棵由 VNode（Virtual Node）节点构成的、纯 JavaScript 对象组成的树形结构，它不直接操作浏览器，而是作为真实 DOM 的轻量级内存映射。它的核心价值在于：用可预测、可比较、可批量处理的方式，代替低效的真实 DOM 频繁操作。
虚拟 DOM 树的基本结构
整棵树以一个根 VNode 为起点，通过 children 字段递归嵌套子节点，形成层级关系。每个 VNode 是一个普通 JS 对象，至少包含以下关键字段：
-
tag：字符串（如
"div"）、组件构造函数、或undefined（表示注释节点） -
data：对象，承载指令（
v-if）、class/style、事件监听器（@click）、key、ref等绑定信息 -
children：VNode 数组，描述该节点的所有子节点；空数组或
undefined表示无子节点 -
text：仅文本节点存在，保存原始字符串内容（如
"Hello"） -
elm：初始为
null，patch 过程中才被赋值为对应的真实 DOM 元素引用
VNode 的五种类型及其语义
Vue 将 VNode 分为五类，每类对应不同渲染意图，影响 patch 行为：
-
元素节点：
tag为标准 HTML 标签名（如"span"），有data和children -
组件节点：
tag是组件选项对象或异步组件定义，需实例化并挂载子树 -
文本节点：无
tag，仅有text字段，children为空 -
注释节点：
tag === undefined且text存在，用于模板中<!-- ... --> -
克隆节点：由
cloneVNode()创建，保留原始节点结构但可独立更新，常用于v-for列表复用
从虚拟 DOM 树到真实 DOM 的映射过程
映射不是静态拷贝，而是一套分阶段、按需执行的动态机制，核心由 render → diff → patch 三步完成：
立即学习“前端免费学习笔记（深入）”；
-
render 阶段：组件执行
render函数（来自模板编译或手写），返回一棵新的 VNode 树；此时所有节点都是纯数据对象，尚未关联任何 DOM -
diff 阶段：Vue 比较新旧两棵 VNode 树，采用深度优先 + 同层比对策略（非全量递归），重点识别节点是否可复用（依据
key和tag）、属性是否变更、子列表是否重排等 -
patch 阶段：根据 diff 结果生成最小操作集（如
createElm、updateChildren、removeNode），真正创建/移动/更新/销毁真实 DOM 元素，并将elm字段指向对应节点
关键设计特点：为什么能高效映射
这种映射机制之所以稳定高效，依赖几个底层约束：
- VNode 是不可变的：每次数据变化都生成全新 VNode 树，避免状态污染，保障 diff 可靠性
- 映射是惰性且增量的：只在必要时（如组件更新、$forceUpdate）触发 render；patch 也只操作差异部分，不重建整棵树
-
key提供身份标识：使列表节点复用逻辑明确，避免默认就地复用导致的状态错乱 -
elm字段实现双向锚定：VNode 持有真实 DOM 引用，真实 DOM 也可通过__vue__等隐式属性反查所属组件和 VNode
