自定义渲染器 API ​

createRenderer() ​

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

• 类型

  ts

  function createRenderer(
    options: RendererOptions
  ): Renderer
  
  interface Renderer {
    render: RootRenderFunction
    createApp: CreateAppFunction
  }
  
  interface RendererOptions {
    patchProp(
      el: HostElement,
      key: string,
      prevValue: any,
      nextValue: any,
      // 其余部分在大多数自定义渲染器中是不会使用的
      isSVG?: boolean,
      prevChildren?: VNode[],
      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 自己做单元测试的私有包。

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!