自定义渲染器 API {#custom-renderer-api}
createRenderer() {#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,
namespace?: ElementNamespace,
parentComponent?: ComponentInternalInstance | null,
): void
insert(el: HostNode, parent: HostElement, anchor?: HostNode | null): void
remove(el: HostNode): void
createElement(
type: string,
namespace?: ElementNamespace,
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
querySelector?(selector: string): HostElement | null
setScopeId?(el: HostElement, id: string): void
cloneNode?(node: HostNode): HostNode
insertStaticContent?(
content: string,
parent: HostElement,
anchor: HostNode | null,
namespace: ElementNamespace,
start?: HostNode | null,
end?: HostNode | null,
): [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 自己做单元测试的私有包。