vnode 是 vue 跨端能力的中枢，作为平台无关的语义描述层，统一描述节点类型、属性、子节点和 key；各端渲染器基于宿主接口将同一 vnode 树映射为 dom、wxml 或原生视图，实现高效复用。
VNode 是 Vue 跨端能力的中枢，不是“适配层”，而是统一的语义描述层。它把开发者写的模板（无论 v-if、v-for 还是组件嵌套）编译成一份与平台无关的中间结构，再由不同端的渲染器各自解释执行——这才是跨端复用真正高效的原因。
VNode 作为平台无关的声明载体
VNode 本身不含任何 DOM 操作、不调用 document.createElement、也不依赖浏览器环境。它只描述“要什么”，比如：
• 节点类型（div、MyButton、文本）
• 属性与事件（props、on:click）
• 子节点结构（数组形式的 children）
• 关键标识（key 用于 diff）
这份结构可被 Web 渲染器转为真实 DOM，也可被小程序渲染器映射为 WXML 标签，还能被 Native 渲染器生成原生 View 实例——同一份 VNode 树，在不同端产出不同底层 UI。
渲染器（Renderer）决定最终输出形态
Vue 的跨端不是靠“写一堆 if-else 判断平台”，而是靠替换 renderer 的实现。每个平台只需提供一组宿主接口（host API），例如：
• createElement：创建对应平台的基本视图单元（DOM 元素 / WXML 节点 / Android TextView）
• insert、remove、setText、patchProps
• parentNode、nextSibling 等节点关系访问方法
Vue 的 runtime-core 模块完全基于这些接口运行，上层组件逻辑、响应式系统、生命周期钩子均不受影响。开发者无需修改业务代码，只需切换 renderer 实例即可完成端迁移。
编译器与运行时协同提升跨端效率
Vue 的模板编译阶段（parse → optimize → codegen）会提前标记静态节点、提取动态绑定路径、生成带快捷路径的渲染函数。这些优化信息被 renderer 在 patch 阶段直接利用，大幅减少跨端更新时的比对开销。例如：
• Web 端用 el.classList.toggle 更新 class
• 小程序端用 setData 的精确路径更新
• Native 端直接调用 view.setAlpha()
差异只在底层调用，而判断逻辑和触发时机由同一套响应式 + VNode + Renderer 流水线统一调度。
服务端与客户端渲染共享同一套 VNode 流程
SSR 场景下，Vue 在 Node.js 中执行相同 render 函数，生成 VNode 树后交由服务端 renderer（如 vue/server-renderer）序列化为 HTML 字符串；客户端 hydration 时，用浏览器 renderer 复用该 VNode 结构，仅补全事件监听与交互逻辑。这种一致性让跨端 + SSR 成为可能——比如 uni-app 同时支持 H5、App、小程序，其服务端预渲染也依赖同一套 VNode 抽象，而非为每端单独实现一套服务端逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
