自学vue3源码 | 初看渲染流程（2）

紧接上文开始执行app.mount。

//packages\runtime-core\src\apiCreateApp.ts
// 第一次渲染设为false
let isMounted = false
mount(
        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
        }
      },

首先执行createVNode，根据名函数名字能看出来这个方法和虚拟DOM有关。创建vnode之后通过render渲染。

//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
}

vnode参数不为空，会执行patch方法。 patch方法应该就是核心渲染代码了。