创建自定义渲染器。通过提供特定于平台的节点创建和操作 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
是 implemented using the same API 。如需更简单的实现,请查看
,它是 Vue 自己的单元测试的私有包。@vue/runtime-test
相关用法
- Vue.js createApp()用法及代码示例
- Vue.js customRef()用法及代码示例
- Vue.js components用法及代码示例
- Vue.js cloneVNode()用法及代码示例
- Vue.js computed()用法及代码示例
- Vue.js computed用法及代码示例
- Vue.js useSSRContext()用法及代码示例
- Vue.js app.directive()用法及代码示例
- Vue.js mergeProps()用法及代码示例
- Vue.js app.config.warnHandler用法及代码示例
- Vue.js pipeToWebWritable()用法及代码示例
- Vue.js app.use()用法及代码示例
- Vue.js v-pre用法及代码示例
- Vue.js h()用法及代码示例
- Vue.js serverPrefetch用法及代码示例
- Vue.js <Transition>用法及代码示例
- Vue.js inject()用法及代码示例
- Vue.js mixins用法及代码示例
- Vue.js ComponentCustomProps用法及代码示例
- Vue.js reactive()用法及代码示例
- Vue.js ComponentCustomProperties用法及代码示例
- Vue.js app.mount()用法及代码示例
- Vue.js <component>用法及代码示例
- Vue.js onMounted()用法及代码示例
- Vue.js app.config.errorHandler用法及代码示例
注:本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 createRenderer()。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。