组件的加载

同步组件在vue-loader的转换下就已经生成一个component对象，然后在整个渲染流程中直接走render函数 > patch > vnode > 真实dom > 挂载 这个流程。

同样异步组件也会走这个流程，但是稍有不同，我们来看看具体流程，而异步组件也有3种写法，第一种：

工厂函数实现异步组件

import Vue from 'vue'

Vue.component('hello ', function(resolve, reject) {
  require(['./components/Hello.vue'], function(res){
    reslove(res)
  })
})

new Vue({...}).$mount('#app')

在 new Vue的具体流程 这篇文章中我们知道渲染流程是要调用render 函数，根据函数调用栈内部是可以找到底层是调用了createComponent这个方法的，重点在这里：
当一个组件是异步组件时，createComponent一开始明显是不能创建出一个对应的vnode的，因为这个组件的js还没有加载完成。看看它是怎么处理这个情况的：
在src/core/instance/render.js里面

同步组件构造器.png

继续往下看

异步组件处理.png

可以看到这里调用了resolveAsyncComponent，看里面内容：

image.png image.png
image.png

这个方法里面定义加载成功、失败的回调，还有一些静态属性表示是否加载成功，成功的结果等，最后返回结果，这个结果里面有多种情况：
加载失败的组件、加载成功的组件、loading组件、undefined。

回到我们上面的逻辑，一开始只能走undefined了。

 Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }

然后是undefined就调用createAsyncPlaceholder方法，这里就是一个返回一个注释节点，相当于一个占位符。

当组件加载成功的时候，就会调用resolve回调，看看具体实现：

image.png

其实就是调用forceUpdate()方法强制更新一遍组件

image.png
再看看

Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
      vm._watcher.update()
    }
  }

image.png

里面又调用_update方法,那这里就走通了，_update里面就是patch > vnode > 真实dom > 挂载这个流程，此时再回到createComponent的流程时,继续调用resolveAsyncComponent方法，

// async component
  let asyncFactory
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    if (Ctor === undefined) {
      // return a placeholder node for async component, which is rendered
      // as a comment node but preserves all the raw information for the node.
      // the information will be used for async server-rendering and hydration.
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

然后里面的逻辑只走到
if (isDef(factory.resolved)) {
return factory.resolved
}
就结束了，因为此时 factory.resolved已经有加载好的结果了，后面的流程就是正常的渲染挂载了。

image.png

总结一下异步组件的工厂函数方式走的流程：

1、第一次渲染拿一个注释节点占位，然后执行这个工厂函数
2、执行工厂函数成功后就强制刷新一次，此时就能渲染出真实的组件节点了。

下面介绍第二种异步组件的方式

Promise实现异步组件

改一下上面的代码为：

import Vue from 'vue'

Vue.component('hello ', () => import('./components/Hello.vue'))

new Vue({...}).$mount('#app')

这样大家应该比较熟悉，并不是说这种写法是Promise,只不过这样子写经过webpack处理就会返回一个Promise而已

同样走上面第一种方式要走的流程，只不过在第一次执行这个函数的时候返回一个Promise就进入下面的流程：

const res = factory(resolve, reject) 
// 都执行了这句，第一种工厂函数方式返回undefined，这种就返回一个Promise

image.png

然后这里同样通过res.then(resolve, reject)传入加载成功、失败回调，剩下的流程就和第一种方式一样了。

高级异步组件

其实这个是Vue提供非常完善的一种加载异步组件的方式了：

import Vue from 'vue'
import ErrorComp  from './ErrorComp.vue'
import LoadingComp  from './LoadingComp.vue'

Vue.component('hello', () => {
  component: import('./components/Hello.vue'), // 返回一个Promise
  loading: LoadingComp, // 加载中组件
  error: ErrorComp, // 加载错误组件
  delay: 200, // 延迟渲染时间
  timeout: 1000 // 加载超时时间
})

new Vue({...}).$mount('#app')

流程的话其实和上面的差不多，唯一不同就是走下面红框里面的流程，然后就是流程包括了loading\error的情况的考虑。

loading-error.png

总结

以上就是三种异步组件的加载方式的流程分析，开发中用得多都是第2，3种，如果是细心的同学会发现异步组件resolve都会强刷渲染，这里可以给个性能提升的提示：就是把多个异步组件利用webpack的魔法注释合成一个异步组件，如果这些组件体积都不大的话。