自定义渲染器 API {#custom-renderer-api}

createRenderer() {#createrenderer}

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

  • 类型

    1. function createRenderer<HostNode, HostElement>(
    2.   options: RendererOptions<HostNode, HostElement>
    3. ): Renderer<HostElement>
    5. interface Renderer<HostElement> {
    6.   render: RootRenderFunction<HostElement>
    7.   createApp: CreateAppFunction<HostElement>
    8. }
    10. interface RendererOptions<HostNode, HostElement> {
    11.   patchProp(
    12.     el: HostElement,
    13.     key: string,
    14.     prevValue: any,
    15.     nextValue: any,
    16.     // the rest is unused for most custom renderers
    17.     isSVG?: boolean,
    18.     prevChildren?: VNode<HostNode, HostElement>[],
    19.     parentComponent?: ComponentInternalInstance | null,
    20.     parentSuspense?: SuspenseBoundary | null,
    21.     unmountChildren?: UnmountChildrenFn
    22.   ): void
    23.   insert(
    24.     el: HostNode,
    25.     parent: HostElement,
    26.     anchor?: HostNode | null
    27.   ): void
    28.   remove(el: HostNode): void
    29.   createElement(
    30.     type: string,
    31.     isSVG?: boolean,
    32.     isCustomizedBuiltIn?: string,
    33.     vnodeProps?: (VNodeProps & { [key: string]: any }) | null
    34.   ): HostElement
    35.   createText(text: string): HostNode
    36.   createComment(text: string): HostNode
    37.   setText(node: HostNode, text: string): void
    38.   setElementText(node: HostElement, text: string): void
    39.   parentNode(node: HostNode): HostElement | null
    40.   nextSibling(node: HostNode): HostNode | null
    42.   // optional, DOM-specific
    43.   querySelector?(selector: string): HostElement | null
    44.   setScopeId?(el: HostElement, id: string): void
    45.   cloneNode?(node: HostNode): HostNode
    46.   insertStaticContent?(
    47.     content: string,
    48.     parent: HostElement,
    49.     anchor: HostNode | null,
    50.     isSVG: boolean
    51.   ): [HostNode, HostNode]
    52. }

  • 示例

    1. import { createRenderer } from '@vue/runtime-core'
    3. const { render, createApp } = createRenderer({
    4.   patchProp,
    5.   insert,
    6.   remove,
    7.   createElement
    8.   // ...
    9. })
    11. // `render` 是底层 API
    12. // `createApp` 返回一个应用实例
    13. export { render, createApp }
    15. // 重新导出 Vue 的核心 API
    16. export * from '@vue/runtime-core'

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