Vue 3 中，什么是 Custom Renderer API？

⚡ 速记答案（30 秒）

通过 createRenderer(hostConfig) 自定义"宿主环境"的一套 DOM 操作接口。可把 Vue 渲染到非 DOM 目标：如 Canvas、WebGL、Native 等。

📖 详细讲解

标准面试回答（推荐记住）

Custom Renderer API 允许开发者自定义渲染目标。通过 createRenderer 传入 hostConfig 对象，定义如何创建元素、插入/移除、设置属性等操作。Vue 负责 diff 和调度，具体的渲染交给自定义实现。这让 Vue 可以渲染到 Canvas、WebGL、原生应用等非 DOM 环境。

渲染器架构

Vue 3 核心分为：

Reactivity (响应式): 独立模块
Runtime Core (运行时核心): 虚拟 DOM、Diff 算法、组件生命周期
Runtime DOM (DOM 运行时): 具体的 DOM 操作实现

Custom Renderer API 暴露了构建自定义 Runtime 的能力。只需实现 Runtime DOM 层面的接口（Host Options），就可以复用 Vue 强大的响应式和组件模型。

核心接口 (HostConfig)

createElement(type)
insert(el, parent, anchor)
remove(el)
patchProp(el, key, val)
parentNode(el)
nextSibling(el)
createText(text)

应用案例

Canvas: 将组件树渲染为 Canvas 图形 (如 @vue/runtime-canvas)
Three.js: 将 Three.Mesh 作为组件使用 (如 TresJS)
Native: 渲染为原生 UI 组件 (如 NativeScript-Vue)

✅ 面试要点

•理解自定义渲染器的用途
•知道需要实现的核心接口
•了解实际应用场景

💻 代码示例

自定义渲染器示例

import { createRenderer } from '@vue/runtime-core'

// 定义宿主环境操作
const { createApp } = createRenderer({
  createElement(type) {
    // 创建自定义元素（如 Canvas 图形）
    return { type, children: [], props: {} }
  },
  
  insert(child, parent, anchor) {
    // 插入元素
    parent.children.push(child)
  },
  
  remove(child) {
    // 移除元素
  },
  
  patchProp(el, key, prevVal, nextVal) {
    // 更新属性
    el.props[key] = nextVal
  },
  
  // ... 更多操作
})

// 使用自定义渲染器
const app = createApp(RootComponent)
app.mount(canvasContext)