Vue源碼淺析之異步組件注冊(cè)

Shonim 發(fā)布于2019-08-23 18:07 / 1075人閱讀

Vue的異步組件注冊(cè)

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

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

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

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

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

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

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

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

// 此時(shí)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)
    }
    // 是否為對(duì)象
    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對(duì)應(yīng)的聲明映射
    this.options[type + "s"][id] = definition
    return definition
  }
}

先判斷傳入的 definition 也就是我們的工廠函數(shù), 是否為對(duì)象, 都說是工廠函數(shù)了, 那肯定不為對(duì)象, 于是這里不調(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 注冊(cè)一個(gè)異步組件, 但是我們最終是通過 new Vue 實(shí)例來實(shí)現(xiàn)頁面的渲染。這里大致瀏覽一下渲染的過程：

Run:

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

構(gòu)造函數(shù) 執(zhí)行 this._init, 在 initMixin 執(zhí)行的時(shí)候定義 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í)例對(duì)象的 getter 觸發(fā)vm._update, 而至于怎么觸發(fā)先忽略, 會(huì)另外講解)

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

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

vm.$createElement = createElement

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

所以我們現(xiàn)在以及進(jìn)入到 createComponent 這個(gè)函數(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初始化的時(shí)候賦值Vue
  const baseCtor = context.$options._base

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

  // async component
  let asyncFactory
  // 如果Ctro.cid為undefined, 則說明h會(huì)是異步組件注冊(cè)
  // 原因是沒有調(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 }, // 組件對(duì)象componentOptions
    asyncFactory
  )

  return vnode
}

從源碼我們可以看出, 異步組件不執(zhí)行組件構(gòu)造器的轉(zhuǎn)換獲取, 而是執(zhí)行 resolveAsyncComponent 來獲取返回的組件構(gòu)造器。由于該過程是異步請(qǐng)求組件, 所以我們看下 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 {
  // 高級(jí)異步組件使用
  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ù)的其中一個(gè)只執(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ù)(忽略不分析), 此時(shí)我們可以發(fā)現(xiàn) resolve 和 reject 都被 once 函數(shù)所封裝, 目的是讓被 once 包裝的任何函數(shù)的其中一個(gè)只執(zhí)行一次, 保證 resolve 和 reject 兩者只能擇一并只執(zhí)行一次。OK, 接著來到 factory 的執(zhí)行, 其實(shí)就是執(zhí)行官方示例中傳入的工廠函數(shù), 這時(shí)候發(fā)起異步組件的請(qǐng)求。同步代碼繼續(xù)執(zhí)行, sync置位false, 表示當(dāng)前的同步代碼執(zhí)行完畢, 然后返回undefined

這里可能會(huì)問怎么會(huì)返回undefined, 因?yàn)槲覀儌魅氲墓S函數(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
      )
    }
  }

因?yàn)閯偛耪f resolveAsyncComponent 執(zhí)行返回了undefined, 所以執(zhí)行 createAsyncPlaceholder 創(chuàng)建注釋vnode

這里可能還會(huì)問為什么要?jiǎng)?chuàng)建一個(gè)注釋vnode, 提前揭曉答案:

因?yàn)橄纫祷匾粋€(gè)占位的 vnode, 等待異步請(qǐng)求加載后執(zhí)行 forceUpdate 重新渲染, 然后這個(gè)節(jié)點(diǎn)會(huì)被更新渲染成組件的節(jié)點(diǎn)。

那繼續(xù), 剛才答案說了, 當(dāng)異步組件請(qǐng)求完成后, 則執(zhí)行 resolve 并傳入對(duì)應(yīng)的異步組件, 這時(shí)候 factory.resolved 被賦值為 ensureCtor 執(zhí)行的返回結(jié)果, 就是一個(gè)組件構(gòu)造器, 然后這時(shí)候 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 方法, 于是我們又會(huì)執(zhí)行 createComponent 的方法, 執(zhí)行 resolveAsyncComponent, 這時(shí)候 factory.resolved 已經(jīng)定義過了, 于是直接返回 factory.resolved 的組件構(gòu)造器。于是就執(zhí)行 createComponent 的后續(xù)組件的渲染和 patch 邏輯了。組件渲染和 patch 這里先不展開。

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

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

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

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

由上面的示例, 可以看到當(dāng)調(diào)用Vue.component的時(shí)候, definition為一個(gè)會(huì)返回 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對(duì)象,  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í)候我們的工廠函數(shù)會(huì)返回一個(gè) Promise, 所以 res.then(resolve, reject) 會(huì)執(zhí)行, 接下來的過程也是等待異步組件請(qǐng)求完成, 然后執(zhí)行 resolve 函數(shù), 接著執(zhí)行 forceRender 然后返回組件構(gòu)造器。

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

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

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

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

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

export function resolveAsyncComponent (
  factory: Function,
  baseCtor: Class
): Class | void {
  // 高級(jí)異步組件使用
  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ù)的其中一個(gè)只執(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對(duì)象， 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í)行, 因?yàn)槲覀儎偛耪f了我們的工廠函數(shù)返回了一個(gè)異步組件配置對(duì)象, 于是 res 就是我們定義該工廠函數(shù)返回的對(duì)象, 這時(shí)候 isObject(res) 為 true, isPromise(res) 為 false, isPromise(res.component) 為 true, 接著判斷 res.error 是否有定義, 于是在 factory 定義擴(kuò)展了 errorComp, errorComp是通過 ensureCtor 來對(duì) res.error 的定義組件轉(zhuǎn)化為組件的構(gòu)造器, loading 也是一樣的邏輯, 在 factory 擴(kuò)展 loadingComp 組件構(gòu)造器。

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

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

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

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

而 res.timeout 主要用來計(jì)時(shí), 當(dāng)在 res.timeout 的時(shí)間內(nèi), 如果當(dāng)前的 factory.resolved 為 undefined, 則說明異步組件加載已經(jīng)超時(shí)了, 于是會(huì)調(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)了解三種異步組件的注冊(cè)過程了。

小結(jié)一下

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

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

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