createRenderer()
创建自定义渲染器。通过提供特定于平台的节点创建和操作 API,您可以利用 Vue 的核心运行时来定位非 DOM 环境。
类型
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, // the rest is unused for most custom renderers 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 // optional, DOM-specific 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] }
例子
import { createRenderer } from '@vue/runtime-core' const { render, createApp } = createRenderer({ patchProp, insert, remove, createElement // ... }) // `render` is the low-level API // `createApp` returns an app instance export { render, createApp } // re-export Vue core APIs export * from '@vue/runtime-core'
细节
Vue 自己@vue/runtime-dom是使用相同的 API 实现的。对于更简单的实现,请查看@vue/runtime-test哪个是 Vue 自己的单元测试的私有包。