Vue官方文檔提供注冊異步組件的方式有三種:

工廠函數(shù)執(zhí)行 resolve 回調(diào)

工廠函數(shù)中返回Promise

工廠函數(shù)返回一個配置化組件對象

我們看下 Vue 官方文檔提供的示例:

Vue.component("async-webpack-example", function (resolve) {
  // 這個特殊的 `require` 語法將會告訴 webpack
  // 自動將你的構(gòu)建代碼切割成多個包, 這些包
  // 會通過 Ajax 請求加載
  require(["./my-async-component"], resolve)
})

簡單說明一下, 這個示例調(diào)用 Vue 的靜態(tài)方法 component 實(shí)現(xiàn)組件注冊, 需要了解下 Vue.component 的大致實(shí)現(xiàn)

// 此時type為component
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 }
    }
    // 記錄當(dāng)前Vue的全局components, filters, directives對應(yīng)的聲明映射
    this.options[type + "s"][id] = definition
    return definition
  }
}

先判斷傳入的 definition 也就是我們的工廠函數(shù), 是否為對象, 都說是工廠函數(shù)了, 那肯定不為對象, 于是這里不調(diào)用 this.options._base.extend(definition) 來獲取組件的構(gòu)造函數(shù), 而是直接把當(dāng)前的 definition(工廠函數(shù)) 保存到 this.options.components 的 "async-webpack-example" 屬性值中, 并返回definition。

接下來發(fā)生什么事情呢？
其實(shí)剛才我們只是調(diào)用了 Vue.component 注冊一個異步組件, 但是我們最終是通過 new Vue 實(shí)例來實(shí)現(xiàn)頁面的渲染。這里大致瀏覽一下渲染的過程：

Run:

new Vue執(zhí)行構(gòu)造函數(shù)

構(gòu)造函數(shù) 執(zhí)行 this._init, 在 initMixin 執(zhí)行的時候定義 Vue.prototype._init

$mount執(zhí)行, 在 web/runtime/index.js 中已經(jīng)進(jìn)行定義 Vue.prototype.$mount

執(zhí)行 core/instance/lifecycle.js 中的 mountComponent

實(shí)例化渲染W(wǎng)atcher, 并傳入 updateComponent(通過 Watcher 實(shí)例對象的 getter 觸發(fā)vm._update, 而至于怎么觸發(fā)先忽略, 會另外講解)

vm._update 觸發(fā) vm._render(renderMixin 時定義在 Vue.prototype._render) 執(zhí)行

在 vm.$options 中獲取 render 函數(shù)并執(zhí)行, 使得傳入的 vm.$createElement(在 initRender 中定義在vm中)執(zhí)行, vm.$createElement也就是平時書寫的 h => h(App)這個h函數(shù)。

vm.$createElement = createElement

createComponent 通過 resolveAsset 查詢當(dāng)前組件是否正常注冊

所以我們現(xiàn)在以及進(jìn)入到 createComponent 這個函數(shù)了, 看下這里異步組件具體的實(shí)現(xiàn)邏輯：

export function createComponent (
  Ctor: Class | Function | Object | void,
  data: ?VNodeData,
  context: Component, // vm實(shí)例
  children: ?Array,
  tag?: string
): VNode | Array | void {

  // 在init初始化的時候賦值Vue
  const baseCtor = context.$options._base

  // Ctor當(dāng)前為異步組件的工廠函數(shù), 所以此步驟不執(zhí)行
  if (isObject(Ctor)) {
    // 獲取構(gòu)造器, 對于非全局注冊的組件使用
    Ctor = baseCtor.extend(Ctor)
  }

  // async component
  let asyncFactory
  // 如果Ctro.cid為undefined, 則說明h會是異步組件注冊
  // 原因是沒有調(diào)用過 Vue.extend 進(jìn)行組件構(gòu)造函數(shù)轉(zhuǎn)換獲取
  if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    // 解析異步組件
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    // Ctor為undefined則直接創(chuàng)建并返回異步組件的占位符組件Vnode
    if (Ctor === undefined) {
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

  ...此處省略不分析的代碼

  // 安裝組件的鉤子
  installComponentHooks(data)

  // return a placeholder vnode
  const name = Ctor.options.name || tag
  const vnode = new VNode(
    `vue-component-${Ctor.cid}${name ? `-${name}` : ""}`,
    data, undefined, undefined, undefined, context,
    { Ctor, propsData, listeners, tag, children }, // 組件對象componentOptions
    asyncFactory
  )

  return vnode
}

從源碼我們可以看出, 異步組件不執(zhí)行組件構(gòu)造器的轉(zhuǎn)換獲取, 而是執(zhí)行 resolveAsyncComponent 來獲取返回的組件構(gòu)造器。由于該過程是異步請求組件, 所以我們看下 resolveAsyncComponent 的實(shí)現(xiàn)

// 定義在render.js中的全局變量, 用于記錄當(dāng)前正在渲染的vm實(shí)例
import { currentRenderingInstance } from "core/instance/render"

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class
): Class | void {
  // 高級異步組件使用
  if (isTrue(factory.error) && isDef(factory.errorComp)) {...先省略}

  if (isDef(factory.resolved)) {
    return factory.resolved
  }
  // 獲取當(dāng)前正在渲染的vm實(shí)例
  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)) {...省略}

  // 執(zhí)行該邏輯
  if (owner && !isDef(factory.owners)) {
    const owners = factory.owners = [owner]
    // 用于標(biāo)記是否
    let sync = true

    ...省略
    const forceRender = (renderCompleted: boolean) => { ...省略 }
    
    // once讓被once包裝的任何函數(shù)的其中一個只執(zhí)行一次
    const resolve = once((res: Object | Class) => {
      // 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 => { ...省略 })

    // 執(zhí)行工廠函數(shù), 比如webpack獲取異步組件資源
    const res = factory(resolve, reject)
    
    ...省略
    
    sync = false
    // return in case resolved synchronously
    return factory.loading
      ? factory.loadingComp
      : factory.resolved
  }
}

resolveAsyncComponent 傳入異步組件工廠函數(shù)和 baseCtor(也就是Vue.extend), 先獲取當(dāng)前渲染的vm實(shí)例接著標(biāo)記sync為true, 表示當(dāng)前為執(zhí)行同步代碼階段, 定義 resolve 和 reject 函數(shù)(忽略不分析), 此時我們可以發(fā)現(xiàn) resolve 和 reject 都被 once 函數(shù)所封裝, 目的是讓被 once 包裝的任何函數(shù)的其中一個只執(zhí)行一次, 保證 resolve 和 reject 兩者只能擇一并只執(zhí)行一次。OK, 接著來到 factory 的執(zhí)行, 其實(shí)就是執(zhí)行官方示例中傳入的工廠函數(shù), 這時候發(fā)起異步組件的請求。同步代碼繼續(xù)執(zhí)行, sync置位false, 表示當(dāng)前的同步代碼執(zhí)行完畢, 然后返回undefined

這里可能會問怎么會返回undefined, 因為我們傳入的工廠函數(shù)沒有l(wèi)oading屬性, 然后當(dāng)前的 factory 也沒有 resolved 屬性。

接著回到 createComponent 的代碼中:

if (isUndef(Ctor.cid)) {
    asyncFactory = Ctor
    // 解析異步組件
    Ctor = resolveAsyncComponent(asyncFactory, baseCtor)
    // Ctor為undefined則直接創(chuàng)建并返回異步組件的占位符組件Vnode
    if (Ctor === undefined) {
      return createAsyncPlaceholder(
        asyncFactory,
        data,
        context,
        children,
        tag
      )
    }
  }

因為剛才說 resolveAsyncComponent 執(zhí)行返回了undefined, 所以執(zhí)行 createAsyncPlaceholder 創(chuàng)建注釋vnode

這里可能還會問為什么要創(chuàng)建一個注釋vnode, 提前揭曉答案:

因為先要返回一個占位的 vnode, 等待異步請求加載后執(zhí)行 forceUpdate 重新渲染, 然后這個節(jié)點(diǎn)會被更新渲染成組件的節(jié)點(diǎn)。

那繼續(xù), 剛才答案說了, 當(dāng)異步組件請求完成后, 則執(zhí)行 resolve 并傳入對應(yīng)的異步組件, 這時候 factory.resolved 被賦值為 ensureCtor 執(zhí)行的返回結(jié)果, 就是一個組件構(gòu)造器, 然后這時候 sync 為 false, 所以執(zhí)行 forceRender, 而 forceRender 其實(shí)就是調(diào)用 vm.$forceUpdate 實(shí)現(xiàn)如下:

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

$forceUpdate 執(zhí)行渲染 watcher 的 update 方法, 于是我們又會執(zhí)行 createComponent 的方法, 執(zhí)行 resolveAsyncComponent, 這時候 factory.resolved 已經(jīng)定義過了, 于是直接返回 factory.resolved 的組件構(gòu)造器。 于是就執(zhí)行 createComponent 的后續(xù)組件的渲染和 patch 邏輯了。組件渲染和 patch 這里先不展開。

于是整個異步組件的流程就結(jié)束了。

先看下官網(wǎng)文檔提供的示例:

Vue.component(
  "async-webpack-example",
  // 這個 `import` 函數(shù)會返回一個 `Promise` 對象。
  () => import("./my-async-component")
)

由上面的示例, 可以看到當(dāng)調(diào)用Vue.component的時候, definition為一個會返回 Promise 的函數(shù), 與工廠函數(shù)執(zhí)行 resolve 回調(diào)不同的地方在于:

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class
): Class | void {

    ...省略

    // 執(zhí)行工廠函數(shù), 比如webpack獲取異步組件資源
    const res = factory(resolve, reject)
    if (isObject(res)) {
      // 為Promise對象,  import("./async-component")
      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
  }
}

主要不同點(diǎn)在于執(zhí)行完 factory 工廠函數(shù), 這時候我們的工廠函數(shù)會返回一個 Promise, 所以 res.then(resolve, reject) 會執(zhí)行, 接下來的過程也是等待異步組件請求完成, 然后執(zhí)行 resolve 函數(shù), 接著執(zhí)行 forceRender 然后返回組件構(gòu)造器。

這里 Promise 寫法的異步組件注冊過程和執(zhí)行回調(diào)函數(shù)沒有太大的區(qū)別。

同樣, 看下官網(wǎng)示例:

const AsyncComponent = () => ({
  // 需要加載的組件 (應(yīng)該是一個 `Promise` 對象)
  component: import("./MyComponent.vue"),
  // 異步組件加載時使用的組件
  loading: LoadingComponent,
  // 加載失敗時使用的組件
  error: ErrorComponent,
  // 展示加載時組件的延時時間。默認(rèn)值是 200 (毫秒)
  delay: 200,
  // 如果提供了超時時間且組件加載也超時了，
  // 則使用加載失敗時使用的組件。默認(rèn)值是：`Infinity`
  timeout: 3000
})

從上面的示例可以看到, 工廠函數(shù)在執(zhí)行成功后會返回一個配置對象, 這個對象的5個屬性我們都可以從官方文檔的注釋了解到各自的作用。那我們看一下這種方式和前面提到的兩種方式的區(qū)別在哪里.

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class
): Class | void {
  // 高級異步組件使用
  if (isTrue(factory.error) && isDef(factory.errorComp)) {
    return factory.errorComp
  }

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

  ...已了解過，省略

  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) => {...省略}
    // once讓被once包裝的任何函數(shù)的其中一個只執(zhí)行一次
    const resolve = once((res: Object | Class) => {
      factory.resolved = ensureCtor(res, baseCtor)
      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 ? `
Reason: ${reason}` : "")
      )
      if (isDef(factory.errorComp)) {
        factory.error = true
        forceRender(true)
      }
    })

    // 執(zhí)行工廠函數(shù)，比如webpack獲取異步組件資源
    const res = factory(resolve, reject)
    if (isObject(res)) {
      // 為Promise對象， import("./async-component")
      if (isPromise(res)) {
        ...省略
      } 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
  }
}

渲染過程同樣來到 resolveAsyncComponent, 一開始判斷 factory.error 是否為 true, 當(dāng)然一開始肯定是 false 的, 不進(jìn)入該邏輯, 接著同樣執(zhí)行到 const res = factory(resolve, reject) 的執(zhí)行, 因為我們剛才說了我們的工廠函數(shù)返回了一個異步組件配置對象, 于是 res 就是我們定義該工廠函數(shù)返回的對象, 這時候 isObject(res) 為 true, isPromise(res) 為 false, isPromise(res.component) 為 true, 接著判斷 res.error 是否有定義, 于是在 factory 定義擴(kuò)展了 errorComp, errorComp是通過 ensureCtor 來對 res.error 的定義組件轉(zhuǎn)化為組件的構(gòu)造器, loading 也是一樣的邏輯, 在 factory 擴(kuò)展 loadingComp 組件構(gòu)造器。

接著, 這時候需要特別注意, 當(dāng)我們定義的 res.delay 為 0, 則直接把 factory.loading 置為 true, 因為這里影響到 resolveAsyncComponent 的返回值。

return factory.loading
      ? factory.loadingComp
      : factory.resolved

當(dāng) factory.loading 為 true, 會返回 loadingComp, 使得 createComponet 的時候不是創(chuàng)建一個注釋vnode, 而是直接執(zhí)行 loadingComp 的渲染。

如果我們的 res.delay 不為0, 則會啟用一個計時器, 先同步返回 undefined 觸發(fā)注釋節(jié)點(diǎn)創(chuàng)建, 在一定的時間后執(zhí)行 factory.loading = true 和 forceRender(false), 條件是組件沒有加載完成以及沒有出錯 reject, 接著執(zhí)行把注釋vnode 替換為加載過程組件 loadingComp 的渲染。

而 res.timeout 主要用來計時, 當(dāng)在 res.timeout 的時間內(nèi), 如果當(dāng)前的 factory.resolved 為 undefined, 則說明異步組件加載已經(jīng)超時了, 于是會調(diào)用 reject 方法, reject 其實(shí)就是調(diào)用 forceRender 來執(zhí)行 errorComp 的渲染。

OK, 當(dāng)我們的組件加載完成了, 執(zhí)行了 resolve 方法, factory.resloved 置為 true, 調(diào)用 forceRender 來把注釋節(jié)點(diǎn)或者是 loadingComp 的節(jié)點(diǎn)替換渲染為加載完成的組件。

到此, 我們已經(jīng)了解三種異步組件的注冊過程了。

異步組件的渲染本質(zhì)上其實(shí)就是執(zhí)行2次或者2次以上的渲染, 先把當(dāng)前組件渲染為注釋節(jié)點(diǎn), 當(dāng)組件加載成功后, 通過 forceRender 執(zhí)行重新渲染?；蛘呤卿秩緸樽⑨尮?jié)點(diǎn), 然后再渲染為loading節(jié)點(diǎn), 在渲染為請求完成的組件。

這里需要注意的是 forceRender 的執(zhí)行, forceRender 用于強(qiáng)制執(zhí)行當(dāng)前的節(jié)點(diǎn)重新渲染, 至于整個渲染過程是怎么樣的后續(xù)文章有機(jī)會的話。。。再講解吧。

本人語文表達(dá)能力有限, 只是突發(fā)奇想為了把自己了解到的過程用自己的話語表達(dá)出來, 如果有什么錯誤的地方望多多包涵。