Vue 跨平台渲染依赖可替换的渲染器，虚拟 DOM（VNode）作为统一中间层抽象界面结构，runtime-core 提供通用逻辑但不操作平台 API，各平台渲染器负责适配原生能力。

可以跨平台渲染。Vue 的虚拟 DOM 本身不直接执行渲染，而是作为统一的中间描述层，把界面结构抽象为轻量 JavaScript 对象（VNode），从而脱离浏览器 DOM 环境的绑定。真正实现跨平台的关键，是**可替换的渲染器（Renderer）**——它才是核心适配层。

渲染器是跨平台的枢纽

Vue 的 runtime-core 提供通用响应式系统、diff 算法和更新调度逻辑，但它不操作任何平台 API。所有平台相关动作，都由你传入的渲染器实现：

• Web 渲染器：调用 document.createElement、el.setAttribute、el.appendChild 等原生 DOM 方法
• Canvas 渲染器：维护画布上下文 ctx，将 VNode 映射为 ctx.fillRect、ctx.fillText 等绘图指令
• 小程序/原生渲染器：生成 WXML 结构或调用 iOS/Android 原生控件 API

VNode 是跨平台的公共语言

虚拟节点（VNode）只保留必要信息：节点类型（如 div、text）、属性（id、style）、子节点列表和 key。它不依赖 HTML 标签语义，也不调用任何平台接口，因此可被任意后端或环境解释。

比如一个按钮组件，在 Web 中生成真实 <button> 元素；在 Canvas 中则被理解为“在 (100, 50) 绘制带圆角、蓝色填充、居中文字的矩形”，两者共享同一份模板与响应式逻辑。

平台能力需额外补足

不同平台天然能力差异大，渲染器必须自行实现缺失机制：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 布局计算：Canvas 没有 CSS 盒模型，需内置简易布局引擎，把 width/margin 转为绝对像素坐标
• 事件映射：监听 canvas 的原始事件，再根据鼠标位置反查命中哪个 VNode，手动触发 onClick
• 脏区更新：避免全画布重绘，只刷新变更节点的边界矩形（dirty rect）

一套代码，多端运行靠构建时切换

组件代码完全使用标准 Vue 语法（<template> 或 setup），不直接访问 document 或 ctx。构建时通过不同入口文件加载对应渲染器：

• Web 版：导入 @vue/runtime-dom，调用 createApp()
• Canvas 版：导入自定义渲染器，调用 createRenderer().createApp()

这种设计让跨平台不是“写一次到处跑”的魔法，而是“逻辑共用、渲染分离”的可控架构。