vue3源码阅读【runtime-dom\src\index.ts 】【mount】

mount

• 执行 normalizeContainer 将字符串或者 dom 处理成 dom 后返回。
• app._component： _component 指向的是我们 调用 createApp 时，传入的参数。
• 初始化根组件 component 的template 属性，来源一是 container.innerHTML； 来源二 是 component.template自已定义的template；来源三是 render 函数 返回
• 执行 runtime-core\src\apiCreateApp.ts/mount 方法，返回 proxy 代理：
  – 执行 createVNode 将根组件rootComponent 封装，生成 vnode 对象
  – 设置 context
  – 执行 render
  – 设置 rootContainer
  – 返回 vnode.component

const app = createApp({
  setup() {
    const count = ref(0)
    function setDom() {
      count.value++
      const dom = document.getElementById('c')
      dom.innerHTML = `<div>hello${count.value}</div>`
    }
    return {
      count,
      setDom,
    }
  }
})

app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
    const container = normalizeContainer(containerOrSelector)
    if (!container) return

    const component = app._component
    if (!isFunction(component) && !component.render && !component.template) {
      // __UNSAFE__
      // Reason: potential execution of JS expressions in in-DOM template.
      // The user must make sure the in-DOM template is trusted. If it's
      // rendered by the server, the template should not contain any user data.
      component.template = container.innerHTML
      // 2.x compat check
      ...
    }

    // clear content before mounting
    container.innerHTML = ''
    const proxy = mount(container, false, container instanceof SVGElement)
    if (container instanceof Element) {
      container.removeAttribute('v-cloak')
      container.setAttribute('data-v-app', '')
    }
    return proxy
  }

mount(
        rootContainer: HostElement,
        isHydrate?: boolean,
        isSVG?: boolean
      ): any {
        if (!isMounted) {
          // #5571
          ...
          
          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
          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
          ;(rootContainer as any).__vue_app__ = app

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

          return getExposeProxy(vnode.component!) || vnode.component!.proxy
        } else if (__DEV__) {
          warn(
            `App has already been mounted.\n` +
              `If you want to remount the same app, move your app creation logic ` +
              `into a factory function and create fresh app instances for each ` +
              `mount - e.g. \`const createMyApp = () => createApp(App)\``
          )
        }
      },