Custom Renderer API是Vue 3提供的可插拔底层渲染接口，将虚拟DOM映射到Canvas、WebGL、终端等非DOM环境，通过hostCreateElement等钩子实现平台无关渲染。
“跨端渲染协议”不是标准术语，实际指的是 Vue 3 提供的 Custom Renderer API——它是一套可插拔的底层渲染接口规范，让 Vue 脱离 DOM 环境，把组件逻辑输出到任意目标平台（如 Canvas、WebGL、终端、小程序、甚至嵌入式屏幕）。
Custom Renderer API 的核心作用
它把 Vue 渲染流程中与平台强耦合的部分抽象成可替换的钩子函数，比如：
- hostCreateElement：不创建 div/span，而是生成一个 Canvas 绘图指令对象
- hostPatchProp：不设置 element.style，而是更新图形上下文的 fillStyle 或 lineDash
- hostInsert：不调用 parentNode.appendChild，而是将绘图命令推入帧缓存队列
- hostRemove：不 removeChild，而是标记该图元为“待清除”并参与下一帧裁剪
为什么需要它？直接写 Canvas 不行吗？
纯 Canvas 手动绘图难维护、无响应式、不支持组件复用、无法 diff 更新。Custom Renderer 把这些能力“嫁接”过去：
- 你仍用
<CanvasRect :x="cx" :y="cy" :width="w"/>写法，但背后不操作 DOM - 数据变化时，Vue 自动计算哪些图元属性变了，只重绘必要部分
- 生命周期（onMounted/onUnmounted）、响应式依赖、v-model、v-for 全部可用
手把手对接非 Web 平台（以 Canvas 为例）
只需三步，不改业务组件代码：
- 定义 hostContext：封装
const ctx = canvas.getContext('2d')和绘图状态管理 - 实现最小必要钩子：至少覆盖
hostCreateElement、hostPatchProp、hostInsert、hostRemove、hostNextSibling - 调用
createRenderer({ ... })创建渲染器，再用renderer.createApp(App)启动
延伸：不止 Canvas，还能对接什么？
只要目标平台能接收“描述性指令”并执行渲染，就能接入：
- 命令行终端：渲染为 ANSI 颜色块或字符画（适合 CLI 工具 UI）
-
微信/支付宝小程序：把 vnode 映射为小程序原生组件树（已有社区方案如
vue-miniapp） -
Three.js/WebGL：将组件转为 3D 场景节点，支持
v-model控制旋转角度 - 打印机/LED 屏幕：输出点阵指令流，用于信息展示设备
