Skip to content
در این صفحه

API رندر کننده سفارشی

createRenderer()

یک رندرکننده سفارشی ایجاد می‌کند. با ارائه APIهای مختص پلتفرم برای ایجاد و دستکاری node، می‌توانید از هسته ران‌تایم Vue برای هدف قرار دادن محیط‌های غیر DOM استفاده کنید.

  • تایپ (Type)

    ts
    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]
    }
  • مثال

    js
    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/runtime-dom خود Vue با استفاده از همان API پیاده‌سازی می‌شود. برای پیاده‌سازی ساده‌تر، ‎@vue/runtime-test  را بررسی کنید که یک پکیج خصوصی برای تست واحد (unit testing) خود Vue است.

API رندر کننده سفارشی has loaded