Vue.js 源码学习 – 组件化（下）

上篇分析了组件化的创建、patch、配置合并，这一篇就来讲一讲组件化的生命周期、组件注册、异步组件三部分。

一、生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期的钩子函数，给予用户在一些特定的场景下添加自己的代码。

下面就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的。

源码中最终执行生命周期的函数都是调用 callHook 方法，它的定义在 src/core/instance/lifecycle.js 文件中：

export function callHook(vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}
复制代码

callHook 函数的逻辑很简单，根据传入的字符串 hook，去拿到 vm.$options[hook] 对应的回调函数数组，然后遍历执行，执行的时候把 vm 作为函数执行的上下文。

上篇文章中，介绍了 options 合并的过程，各个阶段的生命周期函数被合并到 vm.$options 里，并且是一个数组。因此，callHook 函数的功能就是调用某个生命周期钩子注册的所有回调函数。

了解生命周期执行方式后，接下来具体介绍每一个生命周期函数它的调用时机。

1.1、beforeCreate & created

beforeCreate 和 created 函数都是在实例化 Vue 的阶段，在 _init 方法中执行的，它的定义在 src/core/instance/init.js 文件中：

Vue.prototype._init = function (options?: Object) {
  // ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
  // ...
}
复制代码

可以看到 beforeCreate 和 created 钩子的调用是在 initState 前后，initState 的作用是初始化 props、data、methods、watch、computed 等属性。所以 beforeCreate 的钩子函数中就不能获取到 props、data 中定义的值，也不能调用 methods 中定义的函数。

在这两个钩子函数执行的时候，并没有渲染 DOM，所以不能够访问 DOM。

1.2、beforeMount & mounted

beforeMount 钩子函数发生在 DOM 挂载之前，它的调用时机是在 mountComponent 函数中，定义在 src/core/instance/lifecycle.js 文件中：

export function mountComponent(
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // ...
  callHook(vm, 'beforeMount')

  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(
    vm,
    updateComponent,
    noop,
    {
      before() {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate')
        }
      },
    },
    true /* isRenderWatcher */
  )
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}
复制代码

在执行 vm._render() 函数渲染 VNode 之前，执行了 beforeMount 钩子函数，在执行完 vm._update() 把 VNode patch 到真实 DOM 后，执行 mounted 钩子函数。注意，这里对 mounted 钩子函数执行有一个判断逻辑，vm.$vnode 如果为 null，则表明这不是一次组件的初始化过程，而是我们通过外部 new Vue 初始化过程。

下面分析一下组件的 mounted 时机。组件的 VNode patch 到 DOM 后，会执行 invokeInsertHook 函数，把 insertedVnodeQueue 里保存的钩子函数依次执行一遍，它的定义在 src/core/vdom/patch.js 文件中：

function invokeInsertHook(vnode, queue, initial) {
  // delay insert hooks for component root nodes, invoke them after the
  // element is really inserted
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue
  } else {
    for (let i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i])
    }
  }
}
复制代码

该函数会执行 insert 这个钩子函数，对于组件而言，insert 钩子函数的定义在 src/core/vdom/create-component.js 文件中的 componentVNodeHooks 中：

const componentVNodeHooks = {
  // ...
  insert(vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    // ...
  },
  // ...
}
复制代码

从上面可以看到，每个子组件都是在这个钩子函数中执行 mounted 钩子函数，因为 insertedVNodeQueue 的添加顺序是先子后父，所以 mounted 钩子函数的执行顺序也是先子后父。

1.3、beforeUpdate & updated

beforeUpdate 和 updated 钩子函数执行时机都应该是在数据更新的时候。

beforeUpdate 的执行时机是在渲染 Watcher 的 before 函数中，如下代码所示：

export function mountComponent(
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  new Watcher(
    vm,
    updateComponent,
    noop,
    {
      before() {
        if (vm._isMounted && !vm._isDestroyed) {
          callHook(vm, 'beforeUpdate')
        }
      },
    },
    true /* isRenderWatcher */
  )
  // ...
}
复制代码

注意这里有一个判断，也就是在组件已经 mounted 之后，才会去调用这个钩子函数。

updated 的执行时机是在 flushSchedulerQueue 函数调用的时候，它的定义在 src/core/observer/scheduler.js 文件中：

function flushSchedulerQueue() {
  // ...
  callUpdatedHooks(updatedQueue)
}

function callUpdatedHooks(queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
      callHook(vm, 'updated')
    }
  }
}
复制代码

updatedQueue 是更新了的 watcher 数组，那么在 callUpdatedHooks 函数中，它对这些数组做遍历，只有满足当前 watcher 为 vm._watcher 以及组件已经 mounted 这两个条件，才会执行 updated 钩子函数。

1.4、beforeDestroy & destroyed

beforeDestroy 和 destroyed 钩子函数的执行时机在组件销毁的阶段，最终会调用 $destroy 方法，它的定义在 src/core/instance/lifecycle.js 文件中：

Vue.prototype.$destroy = function () {
  const vm: Component = this
  if (vm._isBeingDestroyed) {
    return
  }
  callHook(vm, 'beforeDestroy')
  vm._isBeingDestroyed = true
  // remove self from parent
  const parent = vm.$parent
  if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
    remove(parent.$children, vm)
  }
  // teardown watchers
  if (vm._watcher) {
    vm._watcher.teardown()
  }
  let i = vm._watchers.length
  while (i--) {
    vm._watchers[i].teardown()
  }
  // remove reference from data ob
  // frozen object may not have observer.
  if (vm._data.__ob__) {
    vm._data.__ob__.vmCount--
  }
  // call the last hook...
  vm._isDestroyed = true
  // invoke destroy hooks on current rendered tree
  vm.__patch__(vm._vnode, null)
  // fire destroyed hook
  callHook(vm, 'destroyed')
  // turn off all instance listeners.
  vm.$off()
  // remove __vue__ reference
  if (vm.$el) {
    vm.$el.__vue__ = null
  }
  // release circular reference (#6759)
  if (vm.$vnode) {
    vm.$vnode.parent = null
  }
}
复制代码

beforeDestroy 钩子函数的执行时机是在 $destroy 函数执行最开始的地方，接着执行了一系列的销毁动作，包括从 parent 的 $children 中删除自身，删除 watcher，当前渲染的 VNode 执行销毁钩子函数等，执行完毕后再调用 destroyed 钩子函数。

在 $destroy 的执行过程中，它又会执行 vm.__patch__(vm._node, nul) 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroyed 钩子函数执行顺序是先子后父，和 mounted 过程一样。

二、组件注册

在 Vue.js 中，除了它内置的组件如 keep-alive、component、transition、transition-group 等，自定义的组件在注册前必须注册。

Vue.js 提供了 2 种组件的注册方式，全局注册和局部注册。下面就通过源码来分析这两种注册方式。

2.1、全局注册

要注册一个全局组件，可以使用 Vue.component(tagName, options)。例如：

Vue.component('my-component', {
  // 选项
})
复制代码

那么，Vue.component 函数是什么时候定义的呢，它的定义过程发生在最开始初始化 Vue 的全局函数的时候，定义在 src/core/global-api/assets.js 文件中：

import { ASSET_TYPES } from 'shared/constants'
import { isPlainObject, validateComponentName } from '../util/index'

export function initAssetRegisters(Vue: GlobalAPI) {
  /**
   * Create asset registration methods.
   */
  ASSET_TYPES.forEach((type) => {
    Vue[type] = function (
      id: string,
      definition: Function | Object
    ): Function | Object | void {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id)
        }
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id
          definition = this.options._base.extend(definition)
        }
        if (type === 'directive' && typeof definition === 'function') {
          definition = { bind: definition, update: definition }
        }
        this.options[type + 's'][id] = definition
        return definition
      }
    }
  })
}
复制代码

函数首先遍历 ASSET_TYPES，得到 type 后挂载到 Vue 上。ASSET_TYPE 的定义在 src/shared/constants.js 文件中：

export const ASSET_TYPES = ['component', 'directive', 'filter']
复制代码

所以实际上 Vue 初始化了 3 个全局函数，并且 type 是 component 且 definition 是一个对象的话，通过 this.options._base.extend，相当于 Vue.extend 把这个对象转换成一个继承于 Vue 的构造函数，最后通过 this.options[type + 's'][id] = definition 把它挂载到 Vue.options.components 上。

由于组件的创建都是通过 Vue.extend 继承而来，之前分析过在继承的过程中有这么一段逻辑：

Sub.options = mergeOptions(Super.options, extendOptions)
复制代码

也就是说会把 Vue.options 合并到 Sub.options，也就是组件的 options 上，然后组件实例化阶段，执行 merge options 逻辑，把 Sub.options.components 合并到 vm.$options.components 上。

然后在创建 vnode 的过程中，会执行 _createElement 方法，可以看下它的定义：

export function _createElement(
  context: Component,
  tag?: string | Class<Component> | Function | Object,
  data?: VNodeData,
  children?: any,
  normalizationType?: number
): VNode | Array<VNode> {
  // ...
  let vnode, ns
  if (typeof tag === 'string') {
    let Ctor
    ns = (context.$vnode && context.$vnode.ns) || config.getTagNamespace(tag)
    if (config.isReservedTag(tag)) {
      // platform built-in elements
      if (
        process.env.NODE_ENV !== 'production' &&
        isDef(data) &&
        isDef(data.nativeOn)
      ) {
        warn(
          `The .native modifier for v-on is only valid on components but it was used on <${tag}>.`,
          context
        )
      }
      vnode = new VNode(
        config.parsePlatformTagName(tag),
        data,
        children,
        undefined,
        undefined,
        context
      )
    } else if (
      (!data || !data.pre) &&
      isDef((Ctor = resolveAsset(context.$options, 'components', tag)))
    ) {
      // component
      vnode = createComponent(Ctor, data, context, children, tag)
    } else {
      // unknown or unlisted namespaced elements
      // check at runtime because it may get assigned a namespace when its
      // parent normalizes children
      vnode = new VNode(tag, data, children, undefined, undefined, context)
    }
  } else {
    // direct component options / constructor
    vnode = createComponent(tag, data, context, children)
  }
  // ...
}
复制代码

有一个判断逻辑，isDef(Ctor = resolveAsset(context.$options, 'components', tag))，先看下 resolveAsset 的定义，在 src/core/utils/options.js 文件中：

export function resolveAsset(
  options: Object,
  type: string,
  id: string,
  warnMissing?: boolean
): any {
  /* istanbul ignore if */
  if (typeof id !== 'string') {
    return
  }
  const assets = options[type]
  // check local registration variations first
  if (hasOwn(assets, id)) return assets[id]
  const camelizedId = camelize(id)
  if (hasOwn(assets, camelizedId)) return assets[camelizedId]
  const PascalCaseId = capitalize(camelizedId)
  if (hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
  // fallback to prototype chain
  const res = assets[id] || assets[camelizedId] || assets[PascalCaseId]
  if (process.env.NODE_ENV !== 'production' && warnMissing && !res) {
    warn('Failed to resolve ' + type.slice(0, -1) + ': ' + id, options)
  }
  return res
}
复制代码

上面的代码，先通过 const assets = options[type] 拿到 assets，然后尝试拿 assets[id]。这里需要注意的是，先直接使用 id 拿，如果不存在，则把 id 变成驼峰的形式再拿，如果仍然不存在则在驼峰的基础上把首字母再变成大写的形式再拿，如果仍然拿不到则报错。

回到 resolveAsset(context.$options, 'components', tag)，即拿到 vm.$options.components[tag]，我们就可以在 resolveAsset 的时候拿到这个组件的构造函数，并作为 createComponent 的钩子的参数。

2.2、局部注册

Vue.js 也支持局部注册，可以在一个组件内部使用 components 选项做组件的局部注册，如下：

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld,
  },
}
复制代码

在组件的 Vue 的实例化阶段有一个合并 option 的逻辑，把 components 合并到 vm.$options.components 上，这样我们就在 resolveAsset 的时候拿到这个组件的构造函数，并作为 createComponent 的钩子的参数。

局部注册和全局注册不同的是，只有该类型的组件才可以访问局部注册的子组件，而全局注册是扩展到 Vue.options 下，所以在所有组件创建的过程中，都会从全局的 Vue.options.components 扩展到当前组件的 vm.$options.components 下，这就是全局注册的组件能被任意使用的原因。

三、异步组件

在实际开发工作中，为了减少首屏代码体积，往往会把一些非首屏的组件设计成异步组件，按需加载。 Vue 也支持异步组件的能力，如下：

Vue.component('async-example', function (resolve, reject) {
  require(['./my-async-component'], function (res) {
    resolve(res)
  })
})
复制代码

从代码中可以看出，Vue 注册的不再是一个对象，而是一个工厂函数，函数有两个参数 resolve 和 reject，使用中可能是通过动态请求异步组件的 JS 地址，最终通过执行 resolve 方法，它的参数就是我们的异步组件对象。

由之前分析的组件注册逻辑，由于组件的定义不是一个普通对象，所以不会执行 Vue.extend 的逻辑把它变成一个组件的构造函数，但仍然可以执行到 createComponent 函数，下面重新分析下这个函数，如下：

export function createComponent(
  Ctor: Class<Component> | Function | Object | void,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag?: string
): VNode | Array<VNode> | void {
  if (isUndef(Ctor)) {
    return
  }

  const baseCtor = context.$options._base

  // plain options object: turn it into a constructor
  if (isObject(Ctor)) {
    Ctor = baseCtor.extend(Ctor)
  }
  // ...

  // 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)
    }
  }
  // ...
}
复制代码

从代码中可以看出，由于我们传入的 Ctor 是一个函数，那么不会执行 Vue.extend 逻辑，因此它的 cid 是 undefined，所以进入了异步组件创建的逻辑。首先执行了 Ctor = resolveAsyncComponent(asyncFactory, baseCtor) 方法，它的定义在 src/core/vdom/helpers/resolve-async-component.js 文件中：

export function resolveAsyncComponent(
  factory: Function,
  baseCtor: Class<Component>
): Class<Component> | void {
  if (isTrue(factory.error) && isDef(factory.errorComp)) {
    return factory.errorComp
  }

  if (isDef(factory.resolved)) {
    return factory.resolved
  }

  const owner = currentRenderingInstance
  if (owner && isDef(factory.owners) && factory.owners.indexOf(owner) === -1) {
    // already pending
    factory.owners.push(owner)
  }

  if (isTrue(factory.loading) && isDef(factory.loadingComp)) {
    return factory.loadingComp
  }

  if (owner && !isDef(factory.owners)) {
    const owners = (factory.owners = [owner])
    let sync = true
    let timerLoading = null
    let timerTimeout = null

    ;(owner: any).$on('hook:destroyed', () => remove(owners, owner))

    const forceRender = (renderCompleted: boolean) => {
      for (let i = 0, l = owners.length; i < l; i++) {
        ;(owners[i]: any).$forceUpdate()
      }

      if (renderCompleted) {
        owners.length = 0
        if (timerLoading !== null) {
          clearTimeout(timerLoading)
          timerLoading = null
        }
        if (timerTimeout !== null) {
          clearTimeout(timerTimeout)
          timerTimeout = null
        }
      }
    }

    const resolve = once((res: Object | Class<Component>) => {
      // cache resolved
      factory.resolved = ensureCtor(res, baseCtor)
      // invoke callbacks only if this is not a synchronous resolve
      // (async resolves are shimmed as synchronous during SSR)
      if (!sync) {
        forceRender(true)
      } else {
        owners.length = 0
      }
    })

    const reject = once((reason) => {
      process.env.NODE_ENV !== 'production' &&
        warn(
          `Failed to resolve async component: ${String(factory)}` +
            (reason ? `\nReason: ${reason}` : '')
        )
      if (isDef(factory.errorComp)) {
        factory.error = true
        forceRender(true)
      }
    })

    const res = factory(resolve, reject)

    if (isObject(res)) {
      if (isPromise(res)) {
        // () => Promise
        if (isUndef(factory.resolved)) {
          res.then(resolve, reject)
        }
      } else if (isPromise(res.component)) {
        res.component.then(resolve, reject)

        if (isDef(res.error)) {
          factory.errorComp = ensureCtor(res.error, baseCtor)
        }

        if (isDef(res.loading)) {
          factory.loadingComp = ensureCtor(res.loading, baseCtor)
          if (res.delay === 0) {
            factory.loading = true
          } else {
            timerLoading = setTimeout(() => {
              timerLoading = null
              if (isUndef(factory.resolved) && isUndef(factory.error)) {
                factory.loading = true
                forceRender(false)
              }
            }, res.delay || 200)
          }
        }

        if (isDef(res.timeout)) {
          timerTimeout = setTimeout(() => {
            timerTimeout = null
            if (isUndef(factory.resolved)) {
              reject(
                process.env.NODE_ENV !== 'production'
                  ? `timeout (${res.timeout}ms)`
                  : null
              )
            }
          }, res.timeout)
        }
      }
    }

    sync = false
    // return in case resolved synchronously
    return factory.loading ? factory.loadingComp : factory.resolved
  }
}
复制代码

这个函数比较复杂，因为它实际上处理了 3 种异步组件的创建方式，除了前面的工厂函数一种，还支持 2 种，一种是支持 Promise 创建组件的方式，如下：

Vue.component('async-webpack-example', () => import('./my-async-component'))
复制代码

另一种是高级异步组件，如下：

const AsyncComp = () => ({
  component: import('./MyComp.vue'),
  loading: LoadingComp,
  error: ErrorComp,
  delay: 200,
  timeout: 3000,
})
Vue.component('async-example', AsyncComp)
复制代码

下面就根据这 3 种异步组件的情况，分别分析 resolveAsyncComponent 的逻辑。

3.1、普通函数异步组件

针对普通函数的情况，前面几个 if 的判断可以忽略，它们是为高级组件所用。接着进入实际加载逻辑，定义了 forceRender、resolve 和 reject 函数，这里的 resolve 和 reject 函数用 once 函数做了一层包装，定义在 src/shared/util.js 文件中：

export function once(fn: Function): Function {
  let called = false
  return function () {
    if (!called) {
      called = true
      fn.apply(this, arguments)
    }
  }
}
复制代码

once 函数的逻辑就是传入一个函数，并返回一个新函数，它利用闭包和一个标志位保证了它包装的函数只会执行一次，也就是确保 resolve 和 reject 函数只执行一次。

接下来执行 const res = factory(resolve, reject) 逻辑，这就是执行组件的工厂函数，同时把 resolve 和 reject 函数作为参数传入，组件的工厂函数通常会先发送请求去加载我们的异步组件的 JS 文件，拿到组件定义的对象 res 后，执行 resolve(res) 逻辑，它会先执行 factory.resolved = ensureCtor(res, baseCtor)：

function ensureCtor(comp: any, base) {
  if (comp.__esModule || (hasSymbol && comp[Symbol.toStringTag] === 'Module')) {
    comp = comp.default
  }
  return isObject(comp) ? base.extend(comp) : comp
}
复制代码

函数的目的是为了保证能够找到异步组件 JS 定义的组件对象，并且如果它是一个普通对象，则调用 Vue.extend 把它转换成一个组件的构造函数。

resovle 逻辑最后判断了 sync，显然这个场景下 sync 为 false，那么就会执行 forceRender 函数，拿到每一个调用异步组件的实例 vm，然后执行 vm.$forceUpdate() 方法。它的定义在 src/core/instance/lifecycle.js 文件中：

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

$forceUpdate 的逻辑就是调用渲染 watcher 的 update 方法，让渲染 watcher 对应的回调函数执行，也就是触发了组件的重新渲染。因为 Vue 是数据驱动视图重新渲染，但是在整个异步组件加载过程中是没有数据发生变化的，所以通过执行 $forceUpdate 可以强制组件重新渲染一次。

3.2、Promise 异步组件

Vue.component(
  'async-webpack-example', // 该 `import` 函数返回⼀个 `Promise` 对象。
  () => import('./my-async-component')
)
复制代码

webpack 2+ 支持了异步加载的语法糖：() => import('./my-async-component')，当执行完 res = factory(resolve, reject)，返回的值是 import('./my-async-component') 的返回值，它是一个 Promise 对象。接着进入 if 条件，又判断了 typeof res.then === 'function'，条件满足，执行下面的代码：

if (isUndef(factory.resolved)) {
  res.then(resolve, reject)
}
复制代码

当组件异步加载成功后，执行 resolve，加载失败则执行 reject。

3.3、高级异步组件

由于在开发过程中，异步加载组件需要动态加载 JS，有一定的网络延时，而且会出现加载失败的情况，所以一般需要设计 loading 和 error 组件，并在适当的时机渲染它们。这时候，Vue 提供了一种高级异步组件的方式，通过一个简单的对象配置，就可以搞定 loading 和 error 组件的渲染。下面就来分析下高级异步组件是怎么实现的。

const AsyncComp = () => ({
  component: import('./MyComp.vue'), // 加载中应当渲染的组件
  loading: LoadingComp, // 出错时渲染的组件
  error: ErrorComp, // 渲染加载中组件前的等待时间。默认：200ms。
  delay: 200, // 最⻓等待时间。超出此时间则渲染错误组件。默认：Infinity
  timeout: 3000,
})
Vue.component('async-example', AsyncComp)
复制代码

高级异步组件的初始化逻辑和普通异步组件一样，也是执行 resolveAsyncComponent，当执行完 res = factory(resolve, reject)，返回值就是定义的组件对象，显然满足 else if(isPromise(res.component)) 的逻辑，接着执行 res.component.then(resolve, reject)，当异步组件加载成功后，执行 resolve，失败执行 reject。

因为异步组件加载是一个异步过程，它接着又同步执行了如下逻辑：

if (isDef(res.error)) {
  factory.errorComp = ensureCtor(res.error, baseCtor)
}

if (isDef(res.loading)) {
  factory.loadingComp = ensureCtor(res.loading, baseCtor)
  if (res.delay === 0) {
    factory.loading = true
  } else {
    timerLoading = setTimeout(() => {
      timerLoading = null
      if (isUndef(factory.resolved) && isUndef(factory.error)) {
        factory.loading = true
        forceRender(false)
      }
    }, res.delay || 200)
  }
}

if (isDef(res.timeout)) {
  timerTimeout = setTimeout(() => {
    timerTimeout = null
    if (isUndef(factory.resolved)) {
      reject(
        process.env.NODE_ENV !== 'production'
          ? `timeout (${res.timeout}ms)`
          : null
      )
    }
  }, res.timeout)
}
复制代码

先判断 res.error 是否定义了 error 组件，如果有的话则赋值给 factory.errorComp。接着判断 res.loading 是否定义了 loading 组件，如果有的话则赋值给 factory.loadingComp，如果设置了 res.delay 且为 0，则设置 factory.loading = true，否则延时 delay 的时间执行。

最后判断 res.timeout，如果配置了该项，则在 res.timeout 时间后，如果组件没有成功加载，执行 reject。

在 resolveAsyncComponent 的最后有一段逻辑：

sync = false

return factory.loading ? factory.loadingComp : factory.resolved
复制代码

如果 delay 配置为 0，则这次直接渲染 loading 组件，否则则延时 delay 执行 forceRender，那么又会再一次执行到 resolveAsyncComponent。

这时候按逻辑的执行顺序，有下面几种不同的情况。

3.3.1、异步组件加载失败

当异步组件加载失败，会执行 reject 函数：

const reject = once((reason) => {
  process.env.NODE_ENV !== 'production' &&
    warn(
      `Failed to resolve async component: ${String(factory)}` +
        (reason ? `\nReason: ${reason}` : '')
    )
  if (isDef(factory.errorComp)) {
    factory.error = true
    forceRender(true)
  }
})
复制代码

这个时候会把 factory.error 设置为 true，同时执行 forceRender() 再次执行到 resolveAsyncComponent：

if (isTrue(factory.error) && isDef(factory.errorComp)) {
  return factory.errorComp
}
复制代码

那么就会返回 factory.errorComp，直接渲染 error 组件。

3.3.2、异步组件加载成功

当异步组件加载成功，会执行 resolve 函数：

const resolve = once((res: Object | Class<Component>) => {
  factory.resolved = ensureCtor(res, baseCtor)
  if (!sync) {
    forceRender(true)
  } else {
    owners.length = 0
  }
})
复制代码

首先把加载结果缓存到 factory.resolved 中，这时因为 sync 已经为 false，则执行 forceRender() 再次执行到 resolveAsyncComponent：

if (isDef(factory.resolved)) {
  return factory.resolved
}
复制代码

这个时候直接返回 factory.resolved，渲染成功加载的组件。

3.3.3、异步组件加载中

如果异步组件加载中并未返回，这时候会走到这个逻辑：

if (isTrue(factory.loading) && isDef(factory.loadingComp)) {
  return factory.loadingComp
}
复制代码

那么则会返回 factory.loadingComp，渲染 loading 组件。

3.3.4、异步组件加载超时

如果超时，则走到了 reject 逻辑，之后逻辑和加载失败一样，渲染 error 组件。

3.4、异步组件 patch

回到 createComponent 的逻辑：

Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
if (Ctor === undefined) {
  return createAsyncPlaceholder(asyncFactory, data, context, children, tag)
}
复制代码

第一次执行 resolveAsyncComponent，除非使用高级异步组件 0 delay 去创建一个 loading 组件，否则返回的是 undefined，接着通过 createAsyncPlaceholder 创建一个注释节点作为占位符。它的定义在 src/core/vdom/helpers/resolve-async-component.js 文件中：

export function createAsyncPlaceholder(
  factory: Function,
  data: ?VNodeData,
  context: Component,
  children: ?Array<VNode>,
  tag: ?string
): VNode {
  const node = createEmptyVNode()
  node.asyncFactory = factory
  node.asyncMeta = { data, context, children, tag }
  return node
}
复制代码

实际上就是创建一个占位的注释 VNode，同时把 asyncFactory 和 asyncMeta 赋值给当前的 vnode。

当执行 forceRender 的时候，会触发组件的重新渲染，那么会再一次执行 resolveAsyncComponent，这时候就会根据不同的情况，返回 loading、error 或成功加载的异步组件，返回值不为 undefined，因此就走正常的组件 render、patch 过程。

四、总结

异步组件实现的本质是 2 次渲染，除了 0 delay 的高级异步组件第一次直接渲染成 loading 组件外，其它都是第一次渲染生成一个注释节点，当异步获取组件成功后，再通过 forceRender 强制重新渲染，这样就能正确渲染出我们异步加载的组件。

到这里，组件化的生命周期、组件注册、异步组件已经分析完了，那么整个组件化部分就已经分析完了。