Özelleştirilmiş Renderleyici APIsi

Özelleştirilmiş Renderleyici API'si

bilgi

Özelleştirilmiş bir renderleyici, platforma özgü düğüm oluşturma ve manipülasyon API'leri sağlar.

createRenderer()

Özelleştirilmiş bir renderleyici oluşturur. Platforma özgü düğüm oluşturma ve manipülasyon API'leri sağlayarak, Vue'nun temel çalışma zamanını kullanarak DOM dışı ortamlara hedefleyebilirsiniz.

• Tür

  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,
      // geri kalanı çoğu özelleştirilmiş renderleyici için kullanılmaz
      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
  
    // isteğe bağlı, DOM'a özgü
    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]
  }

• Örnek

  import { createRenderer } from '@vue/runtime-core'
  
  const { render, createApp } = createRenderer({
    patchProp,
    insert,
    remove,
    createElement
    // ...
  })
  
  // `render`, düşük seviyeli API'dir
  // `createApp`, bir uygulama örneği döndürür
  export { render, createApp }
  
  // Vue'nun temel API'lerini yeniden dışa aktar
  export * from '@vue/runtime-core'

Vue'nun kendi @vue/runtime-dom aynı API kullanılarak uygulanmıştır. Daha basit bir uygulama için, Vue'nun kendi birim testleri için özel bir paket olan @vue/runtime-test paketine göz atın.