Vue自定义渲染器仅替换渲染管线第四阶段“宿主平台操作”，前三阶段（响应式追踪、VNode生成、Diff与patch决策）完全不变；它通过RendererOptions注入，保持组件写法一致，但需实现createElement等基础方法并模拟节点树与事件桥接。
Vue 自定义渲染器不是对默认渲染管线的替换，而是对其中“宿主平台操作”环节的替换。整个渲染管线从响应式更新开始，到最终画面呈现，自定义渲染器只介入最后一步——把 VNode 转成目标环境可执行的操作。
渲染管线的四个固定阶段
Vue 的完整渲染流程始终包含以下不可跳过的环节，无论是否使用自定义渲染器：
- 响应式追踪与触发：ref、computed、effect 等由 @vue/reactivity 管理，与渲染器完全解耦
- VNode 生成：模板编译结果或 h() 调用产出标准 VNode 对象，结构统一（type/props/children），不含任何平台语义
- Diff 与 patch 决策：@vue/runtime-core 中的 renderer.ts 负责新旧 VNode 树比对，决定哪些节点需要创建、更新、移动或卸载
- 宿主平台操作：由渲染器调用具体平台 API 执行——这正是自定义渲染器唯一接管的部分
自定义渲染器插在哪个位置？
它不改变前三个阶段的任何逻辑，只替换第四个阶段的实现方式。比如：
- DOM 渲染器调用
document.createElement('div')和el.style.color = 'red' - Canvas 渲染器对应调用
ctx.beginPath(); ctx.rect(...); ctx.fill() - 命令行渲染器则拼接字符串并调用
console.log()
所有这些行为都封装在 RendererOptions 对象里，通过 createRenderer(options) 注入 runtime-core 的 patch 流程中。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
立即学习“前端免费学习笔记（深入）”；
为什么能保持组件写法不变？
因为组件的 setup 函数、生命周期钩子、JSX/h() 语法、甚至 <Teleport> 和 <Suspense> 都运行在 @vue/runtime-core 层，它们只和 VNode 打交道。只要你的自定义渲染器能正确处理 VNode 的 type（如 'div'、'button'、'MyComponent'）和 props（如 onClick、class、style），组件就无需修改。
例如一个带 ref 和 v-model 的表单组件，在 Canvas 渲染器下依然能正常响应输入变化——只是“输入框”被画成一段文字加一个可拖拽矩形，而非原生 input 元素。
实际开发中的关键约束
要让自定义渲染器真正融入 Vue 渲染管线，必须满足几个底层契约：
- 必须提供
createElement、insert、remove、patchProp、setElementText等基础方法，否则 createRenderer 无法构造有效实例 - 需自行模拟“节点树”的存在感：Canvas/WebGL 没有真实 DOM 树，就得用数组或 Map 存储图形指令，并在 patch 时维护其顺序与复用关系
- 事件系统需桥接：DOM 的 addEventListener 在终端或 Canvas 中不存在，需将 onXXX prop 映射为自定义回调注册机制
- 服务端渲染（hydrate）和 SSR 不直接支持，除非额外实现 hydration 函数
