自学vue3源码 | vue实例创建

const Counter = {
  data() {
    return {
      counter: 0
    }
  }
}

Vue.createApp(Counter).mount('#counter')

vue3初始化应用和vue2还是有所不同。

可以从 createApp 这个入口函数入手学习。

//packages\runtime-dom\src\index.ts
export const createApp = ((...args) => {
  const app = ensureRenderer().createApp(...args)
  //缓存mount方法
  const { mount } = app
  // 重写mount方法
  app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    //经过一些处理还是会调用缓存的mount方法
    const proxy = mount(container, false, container instanceof SVGElement)
    return proxy
  }

  return app
})

createApp方法通过 ensureRenderer().createApp(...args) 创建app并重写了mount方法。

//packages\runtime-dom\src\index.ts
function ensureRenderer() {
  return renderer || (renderer = createRenderer<Node, Element>(rendererOptions))
}
//packages\runtime-core\src\renderer.ts
export function createRenderer<
  HostNode = RendererNode,
  HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
  return baseCreateRenderer<HostNode, HostElement>(options)
}
//packages\runtime-core\src\renderer.ts
function baseCreateRenderer(
  options: RendererOptions,
  createHydrationFns?: typeof createHydrationFunctions
): any {
//忽略
return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
}

最后找到createApp方法是通过createAppAPI创建的

//packages\runtime-core\src\apiCreateApp.ts
export function createAppAPI<HostElement>(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
    //忽略
    const app: App = (context.app = {
        use()  {},
        mixin()  {},
        component()  {},
        directive()  {},
        mount()  {},
        unmount() {},
    })
    return app;
}

再次可以看到我们平时会用到的一些API，这个mount就是最初的createApp里面缓存的app的mount。 这就是创建vue实例的整个过程（没有详细分析，我也是刚开始学习。）