Self-study vue3 source | at first view rendering process (2)

Execute app.mount immediately after the above.

// Packages runtime-core SRC apicreateApp. ts // isMounted = false (rootContainer: HostElement, isHydrate? : boolean, isSVG? : boolean ): any { if (! isMounted) { const vnode = createVNode( rootComponent as ConcreteComponent, rootProps ) vnode.appContext = context if (isHydrate && hydrate) { hydrate(vnode as VNode<Node, Element>, rootContainer as any) } else { // render(vnode, rootContainer, isSVG) } isMounted = true app._container = rootContainer return vnode.component! .proxy } },Copy the code

First, createVNode is executed, which is associated with the virtual DOM, as you can see from the name of the function. Render vNodes after they are created.

//packages\runtime-core\src\renderer.ts
const render: RootRenderFunction = (vnode, container, isSVG) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPostFlushCbs()
    container._vnode = vnode
}
Copy the code

The vNode parameter is not empty, and the patch method is executed. The patch method should be the core rendering code.