官方实现

2023年06月11日

柏拉文

越努力，越幸运

一、packages/runtime-dom/src/index.ts render()

---

export const render = ((...args) => {
  ensureRenderer().render(...args)
}) as RootRenderFunction<Element | ShadowRoot>

二、packages/runtime-dom/src/index.ts ensureRenderer()

---

function ensureRenderer() {
  return (
    renderer ||
    (renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
  )
}

三、packages/runtime-core/src/renderer.ts createRenderer()

---

export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}

四、packages/runtime-core/src/renderer.ts baseCreateRenderer()

---

function baseCreateRenderer(
  options: RendererOptions,
  createHydrationFns?: typeof createHydrationFunctions
): any {
  // compile-time feature flags check
  if (__ESM_BUNDLER__ && !__TEST__) {
    initFeatureFlags()
  }

  const target = getGlobalThis()
  target.__VUE__ = true
  if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
    setDevtoolsHook(target.__VUE_DEVTOOLS_GLOBAL_HOOK__, target)
  }

  const {
    insert: hostInsert,
    remove: hostRemove,
    patchProp: hostPatchProp,
    createElement: hostCreateElement,
    createText: hostCreateText,
    createComment: hostCreateComment,
    setText: hostSetText,
    setElementText: hostSetElementText,
    parentNode: hostParentNode,
    nextSibling: hostNextSibling,
    setScopeId: hostSetScopeId = NOOP,
    insertStaticContent: hostInsertStaticContent
  } = options

  // Note: functions inside this closure should use `const xxx = () => {}`
  // style in order to prevent being inlined by minifiers.
  const patch: PatchFn = (
  ) => {
  }

  const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
  }

  const processCommentNode: ProcessTextOrCommentFn = (
  ) => {
  }

  const mountStaticNode = (
  ) => {
  }

  /**
   * Dev / HMR only
   */
  const patchStaticNode = (
  ) => {
  }

  const moveStaticNode = (
  ) => {
  }

  const processElement = (
  ) => {
  }

  const mountElement = (
  ) => {
  }

  const setScopeId = (
  ) => {
  }

  const mountChildren: MountChildrenFn = (
  ) => {
  }

  const patchElement = (
  ) => {
  }

  // The fast path for blocks.
  const patchBlockChildren: PatchBlockChildrenFn = (
  ) => {
  }

  const processFragment = (
  ) => {
  }

  const processComponent = (
  ) => {
  }

  const mountComponent: MountComponentFn = (
  ) => {
  }

  const updateComponent = (n1: VNode, n2: VNode, optimized: boolean) => {
  }

  const setupRenderEffect: SetupRenderEffectFn = (
  ) => {
  }

  const updateComponentPreRender = (
  ) => {
  }

  const patchChildren: PatchChildrenFn = (
  ) => {
  }

  const patchUnkeyedChildren = (
  ) => {
  }

  // can be all-keyed or mixed
  const patchKeyedChildren = (
  ) => {
  }

  const move: MoveFn = (
  ) => {
  }

  const unmount: UnmountFn = (
  ) => {
  }

  const remove: RemoveFn = vnode => {
  }

  const removeFragment = (cur: RendererNode, end: RendererNode) => {
  }

  const unmountComponent = (
  ) => {
  }

  const unmountChildren: UnmountChildrenFn = (
    
  ) => {
  }

  const getNextHostNode: NextFn = vnode => {}

  const render: RootRenderFunction = (vnode, container, isSVG) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPreFlushCbs()
    flushPostFlushCbs()
    container._vnode = vnode
  }

  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
}