Vue3 源码解读系列（二）——初始化应用实例

初始化应用实例

1. 创建 Vue 实例对象

   createApp 中做了两件事：

   1. 创建 app 对象
   2. 保存并重写 mount

   /**
    * 创建 Vue 实例对象
    */
   const createApp = ((...args) => {
     // 1、创建 app 对象，延时创建渲染器，优点是当用户只依赖响应式包的时候，可以通过 tree-shaking 移除核心渲染逻辑相关的代码，减少体积
     const app = ensureRenderer().createApp(...args)
   
     // 2、保存并重写 mount
     const { mount } = app
     app.mount = (containerOrSelector) => {
       // ...
     }
     return app
   })
   

   为什么需要重写 mount 方法，而不把相关逻辑放在 app 对象的 mount 方法内部来实现呢？

   答：因为 Vue 不仅仅是为 Web 平台服务，它的目标是支持跨平台渲染，createApp 函数内部的 app.mount 方法是一个标准的可跨平台的组件渲染流程，因此需要根据具体场景进行定制化。

2. 使用 ensureRenderer().createApp() 来创建 app 对象

   // 渲染相关的一些配置，比如：更新属性的方法，操作 DOM 的方法
   const rendererOptions = {
     patchProp,
     ...nodeOps
   }
   
   let renderer
   /**
    * 检查是否存在渲染器
    */
   function ensureRenderer() {
     return renderer || (renderer = createRenderer(rendererOptions))
   }
   /**
    * 创建渲染器
    */
   function createRenderer(options) {
     return baseCreateRenderer(options)
   }
   /**
    * 创建渲染器的基本逻辑
    */
   function baseCreateRenderer(options) {
     // 组件渲染的核心逻辑
     function render(vnode, container) {
       // ...
     }
     return {
       render,
       createApp: createAppAPI(render)
     }
   }
   /**
    * 创建应用实例的 API
    */
   function createAppAPI(render) {
     // 创建应用实例，接收的两个参数：rootComponent - 根组件的对象 和 rootProps - props参数
     return function createApp(rootComponent, rootProps = null) {
       const app = {
         _component: rootComponent,
         _props: rootProps,
         // app.mount 组件挂载逻辑
         mount(rootContainer) {
           // 1、创建根组件的 vnode
           const vnode = createVNode(rootComponent, rootProps)
   
           // 2、利用渲染器渲染 vnode
           render(vnode, rootContainer)
   
           // 3、设置应用实例的容器为根组件的容器
           app._container = rootContainer
           return vnode.component.proxy
         }
       }
       return app
     }
   }
   

3. 重写 app.mount 方法

   /**
    * 重写 app.mount 方法
    * 重写的目的：
    * 1、让用户可以更灵活的使用 API
    * 2、兼容 Vue2 的写法
    */
   app.mount = (containerOrSelector) => {
     // 1、标准化容器，可以传字符串选择器或 DOM 对象，如果传的是字符串选择器则会将其转换为 DOM 对象作为最终挂载的容器
     const container = normalizeContainer(containerOrSelector)
     if (!container) return
     const component = app._component
   
     // 2、如果组件对象没有定义 render 函数和 template 模板，则取容器的 innerHTML 作为组件模板内容
     if (!isFunction(component) && !component.render && !component.template) {
       component.template = container.innerHTML
     }
   
     // 3、挂载前清空容器内容
     container.innerHTML = ''
   
     // 4、真正的挂载
     return mount(container)
   }