源码解析 createRenderer，Vue 多平台支持全解

createRenderer 是 Vue 3 实现真正平台无关渲染的基石，它通过高度抽象的 rendererOptions 接口（如 createElement、insert、patchProp 等）将核心渲染逻辑与具体宿主环境彻底解耦，让同一套 Vue 运行时既能驱动传统 DOM、Canvas 和 Web Worker，也能无缝支撑 SSR、小程序甚至游戏引擎——你只需为不同平台提供符合契约的底层操作实现，Vue 就能自动适配并高效运行，这正是其跨端能力强大而优雅的核心所在。

createRenderer 是 Vue 3 渲染系统真正实现“平台无关”的核心入口。它不直接渲染任何内容，而是通过注入一套标准化的底层操作接口，动态组装出适配特定环境的渲染器实例。这种设计让 Vue 能在 DOM、Canvas、Web Worker、服务端（SSR）、甚至小程序或游戏引擎中运行，而无需修改核心逻辑。

rendererOptions：平台能力的契约定义

所有跨平台能力都源于一个对象参数 —— rendererOptions。它不是随意传入的配置，而是一组严格定义的函数接口（TypeScript 中为 RendererOptions），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) 表面是挂载函数，实则是平台无关的协调层：

• 它不关心 vnode.el 是真实 DOM 元素、Canvas 2D 上下文、还是 Worker 中的普通对象，只保证调用 options.insert(el, container) 完成归属
• 当 vnode 类型为组件、文本、注释或普通元素时，内部调用对应 processXxx 函数，但所有子流程都只通过 options 中的方法操作节点，不出现任何平台硬编码
• 容器（container）本身也无类型约束 —— 可以是
  、OffscreenCanvas、MessagePort、或 SSR 的 WritableStream，只要 insert 和 remove 能对其生效即可

跨平台典型场景实现要点

不同平台对 rendererOptions 的实现差异，决定了 Vue 如何落地：

• Web（DOM）：@vue/runtime-dom 提供完整实现，使用 document.createElement、el.setAttribute、parent.insertBefore 等标准 API；setElementText 直接赋值 el.textContent
• SSR：@vue/server-renderer 用字符串拼接 + 流式写入替代 DOM 操作；createElement 返回占位对象，insert 实际是追加 HTML 字符串到 buffer；insertStaticContent 支持将静态 vnode 编译为不可变 HTML 片段并缓存
• Web Worker：createElement 返回轻量 JS 对象（含 type/props/children），insert 向主线程 postMessage 发送挂载指令，patchProp 将变更序列化后同步；整个渲染过程不触碰 DOM，仅维护状态快照
• Canvas / WebGL：节点被映射为绘图指令；createElement('bar-chart') 返回带数据和样式的配置对象；insert 触发重绘逻辑；patchProp 更新图表参数并标记脏区域

createApp 的解耦机制

createRenderer 不直接暴露 createApp，而是通过 createAppAPI(render) 工厂生成：

• App 实例的 mount 方法由渲染器决定如何初始化容器 —— Web 中查 DOM，Worker 中连接 port，SSR 中获取 stream
• app.config.isCustomElement 允许平台声明哪些标签不走组件解析，直接交由 createElement 处理（如 Canvas 自定义绘图标签）
• Hydration（激活）逻辑也复用同一套 rendererOptions，只是额外注入 createHydrationFns，让 SSR 生成的 HTML 能与客户端渲染对齐

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~