自定义渲染器 API ​

createRenderer() ​

创建一个自定义渲染器。通过提供平台特定的节点创建以及更改 API，你可以在非 DOM 环境中也享受到 Vue 核心运行时的特性。

• 类型

  ts

  function createRenderer<HostNode, HostElement>(  options: RendererOptions<HostNode, HostElement> ): Renderer<HostElement>  interface Renderer<HostElement> {  render: RootRenderFunction<HostElement>  createApp: CreateAppFunction<HostElement> }  interface RendererOptions<HostNode, HostElement> {  patchProp(  el: HostElement,  key: string,  prevValue: any,  nextValue: any,  // 其余部分在大多数自定义渲染器中是不会使用的  isSVG?: boolean,  prevChildren?: VNode<HostNode, HostElement>[],  parentComponent?: ComponentInternalInstance | null,  parentSuspense?: SuspenseBoundary | null,  unmountChildren?: UnmountChildrenFn  ): void  insert(  el: HostNode,  parent: HostElement,  anchor?: HostNode | null  ): void  remove(el: HostNode): void  createElement(  type: string,  isSVG?: boolean,  isCustomizedBuiltIn?: string,  vnodeProps?: (VNodeProps & { [key: string]: any }) | null  ): HostElement  createText(text: string): HostNode  createComment(text: string): HostNode  setText(node: HostNode, text: string): void  setElementText(node: HostElement, text: string): void  parentNode(node: HostNode): HostElement | null  nextSibling(node: HostNode): HostNode | null   // 可选的, DOM 特有的  querySelector?(selector: string): HostElement | null  setScopeId?(el: HostElement, id: string): void  cloneNode?(node: HostNode): HostNode  insertStaticContent?(  content: string,  parent: HostElement,  anchor: HostNode | null,  isSVG: boolean  ): [HostNode, HostNode] }

• 示例

  js

  import { createRenderer } from '@vue/runtime-core'  const { render, createApp } = createRenderer({  patchProp,  insert,  remove,  createElement  // ... })  // `render` 是底层 API // `createApp` 返回一个应用实例 export { render, createApp }  // 重新导出 Vue 的核心 API export * from '@vue/runtime-core'

  Vue 自身的 @vue/runtime-dom 也是利用这套 API 实现的。要想了解一个简单一些的实现，请参考 @vue/runtime-test，这是一个 Vue 自己做单元测试的私有包。