在上一篇Vue源码——组件是如何注册和使用中，详细介绍了组件注册和使用的内部逻辑流程，里面所介绍都是同步组件的注册和使用。但是在实际开发中，异步组件才是经常使用的。先来看一下，官方文档中是如何注册异步组件，可以分为三种方式。

• 普通函数异步组件

Vue.component('aa', function(resolve, reject) {
    setTimeout(function() {
        resolve({
            template: '<div><p>{{aa}}<span>{{bb}}</span></p></div>',
            data() {
                return {
                    aa: '欢迎',
                    bb: 'Vue'
                }
            }
        })
    }, 1000)
})

• Promise 异步组件

Vue.component('aa', () => import('./aa.js') )

• 高级异步组件

const aa = () => ({
    // 需要加载的组件。应当是一个 Promise
    component: import('./aa.vue'),
    // 加载中应当渲染的组件
    loading: LoadingComp,
    // 出错时渲染的组件
    error: ErrorComp,
    // 渲染加载中组件前的等待时间。默认：200ms。
    delay: 200,
    // 最长等待时间。超出此时间则渲染错误组件。默认：Infinity
    timeout: 3000
})
Vue.component('aa', aa)

从以上示例中可以看到，通过Vue.component注册的组件不再是一个对象，而是一个函数，这个函数也不是组件构造函数，是一个工厂函数。这个工厂函数有两个参数resolve函数和reject函数，其是 Vue 内部定义的，在这个工厂函数中有个异步函数，当异步函数执行成功后调用resolve函数，其参数就是异步组件的对象。

从上一篇