vue3核心源码学习一(CreateApp )

103 阅读1分钟

拉取代码git clone https://github.com/vuejs/core.git

(之前我居然拉取的这个 github.com/vuejs/vue.g… 。。。。)

找到Vue.createApp()

首先我是直接搜的const createApppackages/runtime-dom/src/index.ts里找到了

export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)
  ......
  return app
}) as CreateAppFunction<Element>

然后再找ensureRenderer().createApp(...args),直接ctrl+单击

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

还有调用createRenderer<Node, Element | ShadowRoot>(rendererOptions),继续ctrl+单击

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

...baseCreateRenderer<HostNode, HostElement>(options),继续......

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

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

继续找createAppAPI(render, hydrate),大概在2362行

export function createAppAPI<HostElement>(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {
  
  ......
  const context = createAppContext()
  ......
  return app
  }
}

ok,找到啦。