解释 Vue 3 源码中 `Custom Renderer` (自定义渲染器) 的设计模式和源码入口点，它如何允许 Vue 在非浏览器环境渲染？

各位靓仔靓女，晚上好！我是你们今晚的 Vue 源码解说员，咱们今天聊聊 Vue 3 里的 Custom Renderer，也就是自定义渲染器。 保证听完，你也能对着源码吹几句“这玩意儿，我熟！”

一、为啥需要自定义渲染器？（场景假设）

首先，咱们得明白，Vue 默认是为浏览器准备的，它会把你的组件变成 DOM 元素，然后塞到网页里。但是，世界这么大，总有些奇奇怪怪的需求冒出来。

• 小程序： 微信小程序、支付宝小程序，它们用的不是 HTML，而是一套自己的组件系统。
• Native APP： 使用 Weex、NativeScript 等技术，想把 Vue 组件渲染成原生的 iOS 或 Android 控件。
• 服务端渲染（SSR）： 在服务器上就把 HTML 生成好，直接返回给浏览器，提升首屏加载速度。
• Canvas 游戏： 用 Vue 的组件化思想组织游戏界面，但实际上是用 Canvas API 来绘制。
• 命令行界面（CLI）： 用 Vue 的组件化方式构建命令行应用的界面。

这些场景，浏览器的那一套 DOM 操作就行不通了。这时候，就需要自定义渲染器，告诉 Vue：“嘿，哥们，别往 DOM 里折腾了，按我的规矩来！”

二、自定义渲染器的核心思想：解耦与抽象

Vue 的核心思想是声明式渲染，也就是你只需要描述你的数据和界面，Vue 负责把它们同步起来。自定义渲染器，就是把这个“同步”的过程解耦出来，让你可以自由地定义渲染的目标。

简单来说，Vue 负责管理组件的状态和生命周期，而渲染器负责把这些状态转化为具体的界面元素。

三、Custom Renderer 的源码入口点：createRenderer

Vue 3 提供了一个 createRenderer 函数，它接受一组渲染选项，返回一个渲染器实例。这就是自定义渲染器的入口点。

// packages/runtime-core/src/renderer.ts

import {
  createHydrationFunctions,
  HydrationRenderer,
  HydrationRenderOptions
} from './hydration'
import {
  ComponentInternalInstance,
  createComponentInstance,
  setupComponent
} from './component'
import {
  VNode,
  normalizeVNode,
  createVNode,
  InternalObjectKey,
  Fragment,
  Text,
  Comment,
  Static,
  VNodeArrayChildren,
  Directives,
  isVNode
} from './vnode'
import {
  RendererOptions,
  RootRenderFunction,
  CreateAppFunction,
  compatUtils
} from './baseRender'
import { ReactiveEffect } from '@vue/reactivity'
import { warn } from './warning'
import {
  isString,
  isFunction,
  isArray,
  isPromise,
  isObject,
  ShapeFlags,
  extend,
  invokeArrayFns,
  def,
  SlotFlags,
  isArrayChildren,
  Mutable,
  PatchFlags,
  isTeleport,
  optimizedPatchFlagNames,
  stringifyStatic,
  normalizeClass,
  normalizeStyle,
  EMPTY_OBJ,
  hasOwn
} from '@vue/shared'
import { queueJob, queuePostRenderEffect } from './scheduler'
import { pushWarningContext, popWarningContext } from './warning'
import { startMeasure, endMeasure } from './profiling'
import { setRef } from './helpers/ref'
import {
  registerHMR,
  invalidateHMROpCache,
  rerender
} from './hmr'
import { callWithAsyncErrorHandling, ErrorCodes } from './errorHandling'
import { TeleportImpl, moveTeleport, processTeleport } from './components/Teleport'
import { SuspenseImpl, processSuspense } from './components/Suspense'
import { KeepAliveImpl } from './components/KeepAlive'
import {
  devtoolsComponentAdded,
  devtoolsComponentUpdated,
  devtoolsComponentRemoved,
  devtoolsComponentEmit
} from './devtools'
import { TransitionHooks, getTransitionHooks } from './components/BaseTransition'
import { setInstanceState, SyncFlags } from './componentOptions'
import { setLastElement } from './components/Transition'

// 创建渲染器，接收渲染选项
export function createRenderer<HostNode, HostElement>(
  options: RendererOptions<HostNode, HostElement>
) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}

// 基创建渲染器，包含实际的渲染逻辑
function baseCreateRenderer<HostNode, HostElement>(
  options: RendererOptions<HostNode, HostElement>,
  createHydrateFunction?: (
    options: RendererOptions<HostNode, HostElement>
  ) => HydrationRenderer
): any { // 返回值类型很复杂，这里简化为 any
  const {
    insert: hostInsert,
    remove: hostRemove,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    createText: hostCreateText,
    createComment: hostCreateComment,
    setText: hostSetText,
    setElementText: hostSetElementText,
    parentNode: hostParentNode,
    nextSibling: hostNextSibling,
    querySelector: hostQuerySelector,
    setScopeId: hostSetScopeId,
    cloneNode: hostCloneNode,
    insertStaticContent: hostInsertStaticContent
  } = options

  // ... (省略大量的渲染逻辑) ...

  const render: RootRenderFunction = (vnode, container) => {
      // ... (渲染逻辑) ...
  }

  return {
    render,
    createApp: createAppAPI(render, hydrate)
  }
}

createRenderer 接收一个 RendererOptions 对象，这个对象定义了一系列底层操作，比如创建元素、插入元素、更新属性等等。 你需要根据你的目标平台，实现这些操作。

四、RendererOptions：渲染选项的灵魂

RendererOptions 是一个接口，定义了 Vue 渲染器需要的一些底层操作。 你需要根据你的目标平台，实现这些操作。

// packages/runtime-core/src/baseRender.ts

export interface RendererOptions<HostNode = any, HostElement = any> {
  /**
   * 为给定的标签创建一个元素。
   */
  createElement: (
    type: string,
    isSVG?: boolean,
    isCustomizedBuiltIn?: string,
    vnodeProps?: (VNodeProps & { [key: string]: any }) | null
  ) => HostElement

  /**
   * 创建一个文本节点。
   */
  createText: (text: string) => HostNode

  /**
   * 创建一个注释节点。
   */
  createComment: (text: string) => HostNode

  /**
   * 将节点插入到父节点中指定锚点的前面。
   */
  insert: (
    el: HostNode,
    parent: HostElement,
    anchor?: HostNode | null
  ) => void

  /**
   * 移除一个节点。
   */
  remove: (el: HostNode) => void

  /**
   * 为元素设置文本内容。
   */
  setText: (node: HostNode, text: string) => void

  /**
   * 为元素设置文本内容。
   */
  setElementText: (el: HostElement, text: string) => void

  /**
   * 获取父节点。
   */
  parentNode: (node: HostNode) => HostElement | null

  /**
   * 获取下一个兄弟节点。
   */
  nextSibling: (node: HostNode) => HostNode | null

  /**
   * 使用选择器查询元素。
   */
  querySelector?: (selector: string) => HostElement | undefined | null

  /**
   * 设置作用域 ID (SSR)。
   */
  setScopeId?: (el: HostElement, id: string) => void

  /**
   * 克隆节点。
   */
  cloneNode?: (node: HostNode) => HostNode

  /**
   * 插入静态内容。
   */
  insertStaticContent?: (
    content: string,
    container: HostElement,
    anchor: HostNode | null,
    isSVG: boolean,
    start?: number,
    end?: number
  ) => [HostNode, HostNode] | void

  /**
   * 补丁属性。
   */
  patchProp: (
    el: HostElement,
    key: string,
    prevValue: any,
    nextValue: any,
    isSVG?: boolean,
    prevChildren?: VNode<HostNode, HostElement>[],
    nextChildren?: VNode<HostNode, HostElement>[],
    parentComponent?: ComponentInternalInstance | null,
    unmountChildren?: UnmountChildrenFn
  ) => void

  // ... 其他选项 ...
}

简单来说，这些选项就是 Vue 操作目标平台的基础指令集。 你告诉 Vue 怎么创建元素、怎么插入元素、怎么更新属性，Vue 就能按照你的指示，把组件渲染到目标平台上。

五、一个简单的 Canvas 渲染器示例

咱们来写一个简单的 Canvas 渲染器，把 Vue 组件渲染到 Canvas 上。

1. 定义 RendererOptions

// canvasRenderer.ts

interface CanvasNode {
  type: string;
  props: Record<string, any>;
  children: CanvasNode[];
  x: number;
  y: number;
  width: number;
  height: number;
  text?: string;
}

interface CanvasElement extends CanvasNode {}

const canvasRendererOptions = {
  createElement: (type: string) => {
    const node: CanvasNode = {
      type,
      props: {},
      children: [],
      x: 0,
      y: 0,
      width: 0,
      height: 0,
    };
    return node;
  },
  createText: (text: string) => {
    const node: CanvasNode = {
      type: 'TEXT',
      props: {},
      children: [],
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      text: text,
    };
    return node;
  },
  createComment: (text: string) => {
    return { type: 'COMMENT', props: {}, children: [], x: 0, y: 0, width: 0, height: 0, text };
  },
  insert: (el: CanvasNode, parent: CanvasElement, anchor: CanvasNode | null = null) => {
    if (anchor) {
      const index = parent.children.indexOf(anchor);
      if (index !== -1) {
        parent.children.splice(index, 0, el);
      } else {
        parent.children.push(el);
      }
    } else {
      parent.children.push(el);
    }
  },
  remove: (el: CanvasNode) => {
    // TODO: Implement remove logic
  },
  patchProp: (el: CanvasElement, key: string, prevValue: any, nextValue: any) => {
    el.props[key] = nextValue;
    if (key === 'x') {
      el.x = Number(nextValue);
    } else if (key === 'y') {
      el.y = Number(nextValue);
    } else if (key === 'width') {
      el.width = Number(nextValue);
    } else if (key === 'height') {
      el.height = Number(nextValue);
    }
  },
  setText: (node: CanvasNode, text: string) => {
    node.text = text;
  },
  setElementText: (el: CanvasElement, text: string) => {
    // TODO: Implement setElementText logic
  },
  parentNode: (node: CanvasNode) => {
    // TODO: Implement parentNode logic
    return null;
  },
  nextSibling: (node: CanvasNode) => {
    // TODO: Implement nextSibling logic
    return null;
  },
};

export { canvasRendererOptions };
export type { CanvasElement, CanvasNode };

2. 创建渲染器实例

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { createRenderer } from 'vue';
import { canvasRendererOptions } from './canvasRenderer';

const renderer = createRenderer(canvasRendererOptions);

const app = createApp(App);

app.mount('#app'); // 这里 '#app' 只是一个占位符，实际上不会操作 DOM

3. 编写 Vue 组件

// App.vue
<template>
  <div :x="x" :y="y" :width="width" :height="height" style="border: 1px solid black;">
    Hello, Canvas!
    <p :x="x + 10" :y="y + 20">This is a paragraph.</p>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import {CanvasElement} from './canvasRenderer';

export default {
  setup() {
    const x = ref(50);
    const y = ref(50);
    const width = ref(200);
    const height = ref(100);

    onMounted(() => {
      const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
      const ctx = canvas.getContext('2d');

      const renderCanvas = (node: CanvasElement) => {
        if (!ctx) {
          console.error('Canvas context not available');
          return;
        }
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        const drawNode = (node: CanvasElement) => {
            if (node.type === 'TEXT' && node.text) {
                ctx.fillText(node.text, node.x, node.y);
            } else if (node.type !== 'COMMENT') {
                ctx.strokeRect(node.x, node.y, node.width, node.height);
                node.children.forEach(drawNode);
            }
        };

        drawNode(app._instance?.vnode.el as CanvasElement);
      };

      // 监听 Vue 组件的变化，重新渲染 Canvas
      app._instance?.watchEffect(() => {
        renderCanvas(app._instance?.vnode.el as CanvasElement);
      });
    });

    return { x, y, width, height };
  }
};
</script>

<style scoped>
#myCanvas {
  border: 1px solid red;
}
</style>

4. HTML 结构

<!DOCTYPE html>
<html>
<head>
  <title>Vue Canvas Renderer</title>
</head>
<body>
  <canvas id="myCanvas" width="400" height="300"></canvas>
  <div id="app"></div>
  <script src="/path/to/vue.global.js"></script>
  <script src="/path/to/main.js"></script>
</body>
</html>

重点解释：

• canvasRendererOptions 里的函数，定义了 Vue 如何操作 Canvas。
• App.vue 里的 :x, :y, :width, :height 绑定了 Canvas 元素的属性。
• app._instance?.watchEffect 监听了 Vue 组件的变化，一旦组件的状态改变，就重新渲染 Canvas。
• 我们 hack 了 Vue 实例，访问了 app._instance?.vnode.el 来拿到 Canvas 渲染出来的虚拟节点树。 （注意：这是一个 hack，正式项目不要这么干，这玩意儿随时可能变！）

六、源码分析：patch 函数

自定义渲染器的核心逻辑，都在 patch 函数里。 patch 函数会比较新旧 VNode，然后根据差异，调用 RendererOptions 里的函数，更新目标平台上的元素。

// packages/runtime-core/src/renderer.ts

const patch: PatchFn = (
  n1,
  n2,
  container,
  anchor = null,
  parentComponent = null,
  parentSuspense = null,
  isSVG = false,
  optimized = false,
  internals = sharedInternals,
  scopeId = null
) => {
  // ... (省略大量的 VNode 类型判断和处理逻辑) ...

  switch (n2.type) {
    case Fragment:
      processFragment(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized,
        internals,
        scopeId
      )
      break
    case Text:
      processText(n1, n2, container, anchor)
      break
    case Comment:
      processCommentNode(n1, n2, container, anchor)
      break
    case Static:
      if (n1 == null) {
        mountStaticNode(n2, container, anchor, isSVG)
      } else if (__DEV__) {
        patchStaticNode(n1, n2, container, isSVG)
      }
      break
    case TeleportImpl:
      processTeleport(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized,
        internals,
        scopeId
      )
      break
    case SuspenseImpl:
      processSuspense(
        n1,
        n2,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized,
        internals,
        scopeId
      )
      break
    default:
      if (isString(n2.type)) {
        // 处理普通元素
        processElement(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals,
          scopeId
        )
      } else if (isObject(n2.type)) {
        if (isTeleport(n2.type)) {
          processTeleport(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            optimized,
            internals,
            scopeId
          )
        } else if (isSuspense(n2.type)) {
          processSuspense(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            optimized,
            internals,
            scopeId
          )
        } else {
          // 处理组件
          processComponent(
            n1,
            n2,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            optimized,
            internals,
            scopeId
          )
        }
      } else if (isFunction(n2.type) && (__FEATURE_SUSPENSE__ || !n2.type.props?.renderError)) {
        // 处理函数式组件
        processComponent(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          optimized,
          internals,
          scopeId
        )
      } else {
        if (__DEV__) {
          warn('Invalid VNode type:', n2.type, `(${typeof n2.type})`)
        }
      }
  }
}

// packages/runtime-core/src/renderer.ts
const processElement = (
  n1: VNode | null,
  n2: VNode,
  container: RendererElement,
  anchor: RendererNode | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean,
  internals: RendererInternals,
  scopeId: string | null
) => {
  if (n1 == null) {
    // 挂载新元素
    mountElement(
      n2,
      container,
      anchor,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized,
      internals,
      scopeId
    )
  } else {
    // 更新现有元素
    patchElement(
      n1,
      n2,
      parentComponent,
      parentSuspense,
      isSVG,
      optimized,
      internals,
      scopeId
    )
  }
}

patch 函数会根据 VNode 的类型，调用不同的处理函数，比如 processElement 处理普通元素，processComponent 处理组件。

在 processElement 函数里，会判断是挂载新元素，还是更新现有元素。 如果是更新现有元素，就会调用 patchElement 函数，比较新旧 VNode 的属性，然后调用 hostPatchProp 函数，更新目标平台上的属性。

七、createAppAPI：创建应用的 API

createRenderer 函数返回一个对象，包含 render 函数和 createApp 函数。 createApp 函数用于创建 Vue 应用实例，它会把你的根组件渲染到指定的容器里。

// packages/runtime-core/src/baseRender.ts

export function createAppAPI<HostNode, HostElement>(
  render: RootRenderFunction<HostNode, HostElement>,
  hydrate?: HydrateFn<HostNode, HostElement>
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent: any, rootProps: any = null) {
    if (rootProps != null && !isObject(rootProps)) {
      __DEV__ && warn(`root props passed to app.mount() must be an object.`)
      rootProps = null
    }

    const context = createAppContext()
    const installScope = effectScope(true)

    let isMounted = false

    const app: App<HostElement> = {
      _uid: uid++,
      _component: rootComponent as ConcreteComponent,
      _props: rootProps,
      _container: null,
      _context: context,
      _instance: null,
      _scope: installScope,

      version,

      get config() {
        return context.config
      },

      set config(v) {
        if (__DEV__) {
          warn(
            `app.config cannot be replaced. Modify individual options instead.`
          )
        }
      },

      use(plugin: Plugin, ...options: any[]) {
        if (isInstalled(plugin)) {
          __DEV__ && warn(`Plugin has already been applied to target app.`)
          return app
        }

        if (isFunction(plugin)) {
          plugin(app, ...options)
        } else if (isObject(plugin) && isFunction(plugin.install)) {
          plugin.install(app, ...options)
        } else if (__DEV__) {
          warn(
            `A plugin must either be a function or an object with an "install" ` +
              `function.`
          )
        }
        installedPlugins.add(plugin)
        return app
      },

      mixin(mixin: ComponentOptions) {
        if (__FEATURE_OPTIONS_API__) {
          if (!context.mixins.includes(mixin)) {
            context.mixins.push(mixin)
          }
        } else if (__DEV__) {
          warn(`app.mixin() is only available in builds that support options API`)
        }
        return app
      },

      component(name: string, component: Component): App<HostElement> {
        if (__DEV__ && context.components[name]) {
          warn(`Component "${name}" has already been registered in the app.`)
        }

        context.components[name] = component
        return app
      },

      directive(name: string, directive: Directive) {
        if (__DEV__ && context.directives[name]) {
          warn(`Directive "${name}" has already been registered in the app.`)
        }

        context.directives[name] = directive
        return app
      },

      mount(
        rootContainer: HostElement | string,
        isHydrate?: boolean,
        isSVG?: boolean
      ): any {
        if (!isMounted) {
          // ... (挂载逻辑) ...
          isMounted = true
          app._container = rootContainer as any
          // for HMR purpose, the root element is also exposed on the app instance
          // this is technically not correct since it's only available after
          // mount() is called, but the devtools relies on it.
          ;(rootContainer as any).__vue_app__ = app

          if (rootComponent) {
            // 3. Create root vnode.
            if (!isFunction(rootComponent)) {
              rootComponent = extend({}, rootComponent)
            }

            if (__COMPAT__) {
              isCompatEnabled()
              if (
                !isCompatValid(
                  DeprecationTypes.APP_ROOT_API,
                  rootComponent.__name,
                  rootComponent
                )
              ) {
                return
              }
            }

            const vnode = createVNode(
              rootComponent as ConcreteComponent,
              rootProps
            )
            // store app context on the root VNode.
            // this will be set on the root instance on initial mount.
            vnode.appContext = context

            // HMR root binding
            if (__DEV__) {
              context.reload = () => {
                render(null, rootContainer)
                render(createVNode(rootComponent as ConcreteComponent, rootProps), rootContainer)
              }
            }

            if (isHydrate && hydrate) {
              hydrate(vnode as any, rootContainer as any)
            } else {
              // 调用 render 函数，把根组件渲染到容器里
              render(vnode, rootContainer as any, isSVG)
            }
            app._instance = vnode.component as ComponentInternalInstance
          }
        } else if (__DEV__) {
          warn(
            `App has already been mounted.n` +
              `If you want to remount the same app, unmount it first by calling ` +
              `app.unmount().`
          )
        }
        return app
      },

      unmount() {
        if (isMounted) {
          render(null, app._container)
          if (__DEV__) {
            ;(app._container as any).__vue_app__ = null
          }
        } else if (__DEV__) {
          warn(`Cannot unmount app before mount().`)
        }
      },

      provide(key: InjectionKey<any> | string, value: any) {
        if (__DEV__ && (key as string | symbol) in context.provides) {
          warn(
            `App already provides property with key "${String(key)}". ` +
              `It will be overwritten with the new value.`
          )
        }

        context.provides[key as string | symbol] = value

        return app
      }
    }

    return app
  }
}

createAppAPI 返回一个 createApp 函数，这个函数接收根组件和根 props，返回一个 Vue 应用实例。 应用实例提供了 mount 函数，用于把根组件渲染到指定的容器里。

在 mount 函数里，会创建根 VNode，然后调用 render 函数，把根 VNode 渲染到容器里。

八、总结

自定义渲染器是 Vue 3 强大的扩展机制，它允许你把 Vue 组件渲染到任何目标平台上。

• createRenderer： 创建渲染器实例的入口点。
• RendererOptions： 定义底层操作的接口，你需要根据目标平台实现这些操作。
• patch： 比较新旧 VNode，更新目标平台上的元素。
• createAppAPI： 创建 Vue 应用实例的 API。

通过自定义渲染器，你可以把 Vue 的组件化思想应用到更广泛的领域，创造出更多有趣的应用。

九、思考题

1. 如何实现一个基于 WebGL 的 Vue 渲染器？
2. 如何优化自定义渲染器的性能？
3. 自定义渲染器在服务端渲染（SSR）中扮演什么角色？

今天的分享就到这里，希望大家有所收获！ 咱们下回再见！