Vue.js通过createRenderer接管VNode“落地”过程，实现跨平台渲染；核心是用平台API替代DOM操作，支持Canvas、终端等非DOM环境，组件复用需约束指令使用并下沉平台逻辑。
Vue.js 利用自定义渲染器构建非 DOM 应用，关键不在于替换 Vue 的响应式系统或组件模型，而在于接管虚拟节点（VNode）到目标平台的“落地”过程。只要实现一组平台无关的操作接口，就能让 Vue 的模板、响应式更新、组件生命周期等能力，在 Canvas、WebGL、终端、智能手表甚至游戏引擎中照常运行。
核心：用 createRenderer 替换 DOM 操作链
Vue 3 的 @vue/runtime-core 提供了 createRenderer(options)，它接受一个配置对象，里面是一组底层操作函数。这些函数不再调用 document.createElement 或 el.setAttribute，而是对接目标环境的原生 API：
-
createElement(type)：返回一个轻量级节点对象（如
{ type: 'circle', id: 'c1' }），不是 DOM 元素 - insert(child, parent)：把子节点加入父节点的 children 数组，或提交给 Canvas 的绘制队列
-
patchProp(el, key, prev, next)：根据 key 类型做差异化处理——比如
fill改颜色、radius更新半径、onClick绑定 Canvas 区域点击逻辑 - remove(el)：从渲染树中移除节点，或标记为待清除的图形对象
-
setElementText(el, text)：对文本类节点调用
ctx.fillText()，而非设置textContent
Canvas 渲染器的典型实现路径
以 Canvas 为例，自定义渲染器不是直接在 render 阶段画图，而是分两层：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 第一层：构建轻量 VNode 树（含 type/props/children），由 Vue 编译器生成，与 DOM 版本完全一致
- 第二层：在
renderer.render()触发时，遍历 VNode 树，调用ctx方法批量绘制；属性变更时只重绘受影响区域，而非全屏清空 - 事件处理需自行封装：例如监听 canvas 的
mousemove，再通过坐标比对触发对应 VNode 的onHover
适配非标准设备的关键点
面向电视、手表等资源受限设备时，需主动约束渲染行为：
立即学习“前端免费学习笔记（深入）”；
- 禁用过渡动画和复杂样式计算，用布尔标记代替 CSS 类切换
- 将
patchProp中的style处理简化为仅支持color、fontSize等极简属性 - 用
createText和createComment返回占位对象，避免创建真实 DOM 节点 - 对
nextSibling、parentNode等查询方法，直接返回null或静态引用，减少运行时开销
跨平台组件复用的实践前提
真正实现“写一次，多端跑”，需要约定好两件事：
- 组件内部只使用 Vue 基础指令（
v-if、v-for、@click）和 props，不依赖ref获取 DOM 或document全局对象 - 平台特有逻辑（如 Canvas 尺寸适配、TV 遥控键映射）全部下沉到渲染器实现层，组件层无感知
- 借助
defineCustomElement或h函数统一构造 VNode，确保不同 renderer 接收相同输入结构
