自定义渲染器 API ​

createRenderer() ​

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

• 类型

  ts

  function createRenderer( options: RendererOptions): Rendererinterface 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 的核心 APIexport * from '@vue/runtime-core'

  

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

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