“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

How to build environment and debug source Vue3.0 source code learning – environment build

Vue instance creation process

How to create an instance

  • Or from thetodomvcStart debugging (paths/packages/vue/examples/composition/todomvc),createApp()Hit the first break point

  • Step throughF11Go in and find the entry file/packages/runtime-dom/src/index.ts

  • createApp()The returnedappThat’s the instance created
export const createApp = ((. args) = > {
  constapp = ensureRenderer().createApp(... args) ...const { mount } = app
  app.mount = (containerOrSelector: Element | ShadowRoot | string): any= >{... }// Finally returns
  return app
}) as CreateAppFunction<Element>

Copy the code

Where is the instance created

  • appfromensureRenderer().createApp()Is found in the current fileensureRenderer()

  • rendererUndefined at first, so actually returnscreateRender()Step into thecreateRenderer()location/packages/runtime-core/src/renderer.ts

  • It returns onebaseCreateRenderer()Again, this is the largest function in Vue3 and is a renderer
  • Go straight to the bottom of this function, about 2300 lines, and see that an object is returned, and findcreateApp
  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
Copy the code
  • createAppExecuted acreateAppAPIFunction, enter position/packages/runtime-core/src/apiCreateApp.ts

  • Finally I seecreateAppThe true face of lushan

export function createAppAPI<HostElement> (render: RootRenderFunction, hydrate? : RootHydrateFunction) :CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {...const app: App = (context.app = {
      _uid: uid++,
      _component: rootComponent as ConcreteComponent,
      _props: rootProps,
      _container: null._context: context,
      _instance: null.use(plugin: Plugin, ... options: any[]){... },mixin(mixin: ComponentOptions) {
        ...
      },

      component(name: string, component?: Component): any {
        ...
      },

      directive(name: string, directive? : Directive){... }, mount( rootContainer: HostElement, isHydrate? : boolean, isSVG? : boolean ): any { ... },unmount(){... },provide(key, value){... })...return app
  }
}
Copy the code
  • createApp().mount('#app')What is executedapp.mount()This function
  • The main function is to changecreateApp()The incoming data and state are converted to realdomAnd appends to the host element#appThe detailed execution process will be explained in the next article
mount( rootContainer: HostElement, isHydrate? : boolean, isSVG? : boolean ): any {if(! isMounted) {// Create virtual DOM
          const vnode = createVNode(
            rootComponent as ConcreteComponent,
            rootProps
          )
          // store app context on the root VNode.
          // this will be set on the root instance on initial mount.
          vnode.appContext = context

          // HMR root reload 
          // Convert to real DOM and mount to rootContainer
          if (__DEV__) {
            context.reload = () = > {
              render(cloneVNode(vnode), rootContainer, isSVG)
            }
          }

          if (isHydrate && hydrate) {
            hydrate(vnode as VNode<Node, Element>, rootContainer as any)
          } else {
            render(vnode, rootContainer, isSVG)
          }
          isMounted = true
          app._container = rootContainer
          // for devtools and telemetry; (rootContaineras any).__vue_app__ = app

          if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
            app._instance = vnode.component
            devtoolsInitApp(app, version)
          }

          returngetExposeProxy(vnode.component!) || vnode.component! .proxy }else if(__DEV__) { ... }},Copy the code

Review past

Vue3.0 source code learning – environment building

Vue3.0 source code learning – overall architecture