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

Vue.createApp(Counter).mount('#counter')
Copy the code

The vuE3 initialization application is still different from vue2.

You can start with the createApp entry function.

//packages\runtime-dom\src\index.ts export const createApp = ((... args) => { const app = ensureRenderer().createApp(... The args) / / cache the mount method const {mount} = app/app/rewrite the mount method. The mount = (containerOrSelector: Element | ShadowRoot | string) : Any => {// After some processing, the cached mount method is called const proxy = mount(container, false, container instanceof SVGElement) return proxy } return app })Copy the code

The createApp method is ensureRenderer().createApp(… Args) created app and overwrote the mount method.

//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 {// ignore return {render, hydrate, createApp: createAppAPI(render, hydrate)}}Copy the code

The createApp method was created with createAppAPI

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

This is the mount of the app that was cached in the original createApp. This is the whole process of creating vUE instances (without going into detail, I’m just starting to learn).