“This is the second day of my participation in the First Challenge 2022, for more details: First Challenge 2022”.

preface

Before Vue3.0 source code learning — initialization process analysis (1. Instance creation process) understand Vue in the creation of an instance returned an object, this object has a mount function mount, this article will learn about the process of Vue mount

View the call stack for the mount function

  • increateAppAPIIn the functionmountDefinition of, position at/packages/runtime-core/src/apiCreateApp.tsThat’s initializationcreateApp().mount('#app')The mount function called was not initially mounted, soisMounted === falseMake a break point here

  • You see it’s called in two placesmountfunction

  • The first step intodomvcThe initial call in

  • The second step in thecreateApp (/packages/runtime-dom/src/index.ts)Example appRedefined onmountMethod which executes the originalmountMethods are designed to be extensible and compatible with the browser environment

  • By looking at the call stack, you can get a clear and quick look at the originalmountWhere the function is called during initialization

View the mount function execution process in the source code

  • So let’s do it the first timemountThe component is not yet mounted,isMounted === false 走 ifbranch
mount( : HostElement, isHydrate? : boolean, isSVG? : boolean ): any {if(! isMounted) {/ / go here
          // 1. Create a vNode for the root component to convert the real DOM into a virtual DOM
          const vnode = createVNode(
             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
          if (__DEV__) {
            context.reload = () = > {
              render(cloneVNode(vnode), rootContainer, isSVG)
            }
          }

          if (isHydrate && hydrate) {
            hydrate(vnode as VNode<Node, Element>, rootContainer as any)
          } else {
            // 2. Render the virtual DOM into the real DOM
            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 } ...Copy the code
    1. Create a vNode for the root component, convert the real DOM into a virtual DOM,
const vnode = createVNode(
    rootComponent as ConcreteComponent,
    rootProps
)
Copy the code

Why use the virtual DOM: The cost of creating a real DOM is high. Real DOM nodes implement many properties, while vNodes implement only the necessary properties, so creating a VNode is relatively cheap.

    1. Render the virtual DOM into the real DOM
render(vnode, rootContainer, isSVG)
Copy the code
  • thisrenderThe largest rendering function in Vue3, introduced in the previous chapterbaseCreateRenderer, and is being executedcreateAppAPIIs passed in as the first argument, positionpackages\runtime-core\src\renderer.ts
// Create the render function
function baseCreateRenderer(options: RendererOptions, createHydrationFns? :typeof createHydrationFunctions
) :any {...const render: RootRenderFunction = (vnode, container, isSVG) = > {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null.null.true)}}else {
      // The first parameter of initial patch is null
      // Patch is mounted for the first time
      // The vNode is converted by patch into a real DOM object and appended to the container
      patch(container._vnode || null, vnode, container, null.null.null, isSVG)
    }
    flushPostFlushCbs()
    container._vnode = vnode
  }
  
  ...
  
  return {
    render,
    hydrate,
    createApp: createAppAPI(render, hydrate)
  }
} 
Copy the code
  • patchThe execution of the function will be studied in the next article

summary

The mounting process is to generate a VNode and pass it to the patch function to convert it into a real DOM and mount it on the host element

Review past

Vue3.0 source code learning — initialization process analysis (1. Instance creation process)

Vue3.0 source code learning – overall architecture

Vue3.0 source code learning – environment building