虚拟dom是vue用javascript对象描述真实dom的轻量级抽象层，核心为vnode；vnode含tag、data、children等属性，分元素、组件、文本、注释、克隆五类，参与render创建与patch更新流程，提升渲染效率与开发可控性。
虚拟DOM不是真实DOM的副本，而是一套用JavaScript对象描述真实DOM结构的轻量级抽象层。Vue在初始化或数据更新时，并不直接操作浏览器DOM，而是先生成一棵由VNode（Virtual Node）构成的树状结构——即虚拟DOM树。它作为真实DOM与响应式系统之间的中间桥梁，让Vue能以更可控、更高效的方式完成视图更新。
什么是VNode：Vue中虚拟节点的核心定义
VNode是Vue内部用来表示一个DOM节点的JavaScript对象，它不包含任何真实的DOM引用，只保存节点的关键元信息。每个VNode代表页面中一个可能存在的元素、组件、文本或注释节点。
关键属性包括：
用于自动切换项目中适合的node 版本
下载
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求，未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
- tag：字符串，表示标签名（如"div"）、组件选项对象、或特殊标识（如undefined表示注释节点）
- data：对象，存放指令、class、style、事件监听器、ref、key等绑定信息
- children：数组，子VNode列表，构成树形结构的基础
- text：字符串，仅文本节点存在，存储纯文本内容
- elm：指向对应真实DOM元素的引用（patch阶段才赋值，初始为null）
- key：用于diff算法中识别节点身份，影响复用逻辑
- componentOptions：组件类型VNode特有，记录propsData、children、Ctor等组件初始化所需信息
- context：创建该VNode的Vue实例，用于作用域插槽、$scopedSlots等场景
VNode的类型划分：不同用途决定不同结构
Vue根据渲染目标将VNode分为五类，每类结构侧重点不同：
- 普通元素节点：tag为HTML标签名，data含class/style/attrs等，children为子VNode数组
- 组件节点：tag为组件构造函数或异步组件Promise，componentOptions提供props和插槽，data中可能含hook钩子
- 文本节点：tag为undefined，text字段非空，children为null
- 注释节点：tag为undefined，isComment为true，text存注释内容
- 克隆节点（fragment）：当模板根节点为多个同级元素时，Vue 3中使用Fragment VNode（Vue 2需借助render函数显式返回数组）
VNode如何参与渲染流程：从create到patch
Vue的渲染分两步：先通过render函数生成VNode树（create阶段），再通过patch算法比对新旧VNode并更新真实DOM（update阶段）。
- render函数执行后返回VNode，可能是用户手写，也可能是模板编译生成的函数
- 首次挂载时，patch(null, vnode)触发完整DOM创建；后续更新则调用patch(oldVnode, newVnode)
- diff过程基于双端比较+key优化：优先匹配首尾节点，结合key快速定位可复用节点，避免无谓的DOM销毁重建
- 只有当VNode的elm为空时才会创建真实DOM；复用时直接移动/更新已有elm
理解VNode对开发的实际价值
掌握VNode结构不只是源码阅读需要，更能提升实际编码质量：
- 写render函数时，能准确构造合法VNode，比如正确传入h('div', { class: 'box' }, [...])
- 调试时可通过$vnode或this.$slots查看组件内部VNode结构，定位插槽未渲染原因
- 封装高阶组件或自定义指令时，常需遍历/修改子VNode（如统一注入props、包裹样式容器）
- 服务端渲染（SSR）依赖VNode生成HTML字符串，了解其结构有助于排查hydrate不一致问题
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
