createrenderer 是 vue 3 实现平台无关渲染的核心入口,通过注入标准化 rendereroptions 接口(如 createelement、insert、patchprop 等)动态生成适配 dom/canvas/worker/ssr 等环境的渲染器,render 函数与 createapp 均基于该接口解耦实现。

createRenderer 是 Vue 3 渲染系统真正实现“平台无关”的核心入口。它不直接渲染任何内容,而是通过注入一套标准化的底层操作接口,动态组装出适配特定环境的渲染器实例。这种设计让 Vue 能在 DOM、Canvas、Web Worker、服务端(SSR)、甚至小程序或游戏引擎中运行,而无需修改核心逻辑。
rendererOptions:平台能力的契约定义
所有跨平台能力都源于一个对象参数 —— rendererOptions。它不是随意传入的配置,而是一组严格定义的函数接口(TypeScript 中为 RendererOptions<hostnode hostelement></hostnode>),Vue 运行时只依赖这些函数完成节点生命周期操作:
-
createElement:创建宿主平台的节点(如
document.createElement、canvas.createImage()或 Worker 中的虚拟节点对象) - insert / remove / parentNode / nextSibling:描述节点关系与挂载顺序,不预设 DOM 树结构,支持链表、数组、自定义图结构等组织方式
- patchProp:统一属性更新逻辑,可处理 HTML 属性、SVG 命名空间、Canvas 绘图状态、Worker 消息字段等
- createText / setText / setElementText:文本内容抽象,支持纯字符串、TypedArray(Worker 场景)、或序列化后的 JSON 字符(SSR 流式渲染)
- insertStaticContent(可选):用于 SSR 静态提升或 Canvas 批量绘制优化,允许平台一次性插入已编译的 HTML 片段或绘图指令集
render 函数:平台无关的协调中枢
createRenderer 返回的 render(vnode, container) 表面是挂载函数,实则是平台无关的协调层:

