Vue中動態組件和異步組件實例分析

這篇文章主要介紹“Vue中動態組件和異步組件實例分析”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue中動態組件和異步組件實例分析”文章能幫助大家解決問題。

前言

在vue官方資料中，我們可以可以很學會如何通過vue構建“動態組件”以及“異步組件”，然而，在官方資料中，并沒有涉及到真正的“動態異步”組件，經過大量的時間研究和技術分析，我們給出目前比較合理的技術實現方式，并分析一下vue動態異步組件的原理

動態組件 & 異步組件的存在，使得我們更方便地控制首屏代碼的體積，加快加載速度。

拋開具體細節不談，一個普通 Vue 組件從創建到展現在頁面里，主要經歷了以下流程：

// 組件 Object
{
 template: '<div>I am async!</div>'
}
// 經過 compileToFunctions 得到對應的 render function 
with(this) {
 return _c('div', [_v("I am async!")])
}
// 在經過 render 得到 Vnode 再 update 成為真實DOM

動態組件&異步組件與之有什么區別呢？

主要區別在于 render 中 createComponent 這一步，舉例。

// 組件
Vue.component('example', {
 template: '<div>I am async!</div>'
})

普通組件在 createComponent 時，會依據開發者自定義的 options，利用 Vue.extend 生成對應的構造函數，從而得到對應的 Vnode 。而一個異步組件

// 異步組件
Vue.component('async-example', function (resolve, reject) {
 // 利用 setTimeout 模擬請求
 setTimeout(function () {
  // 向 `resolve` 回調傳遞組件定義
  resolve({
   template: '<div>I am async!</div>'
  })
 }, 1000)
})

則是要經過一系列處理，具體過程如下

在源碼的 create-component。

// async component
let asyncFactory
if (isUndef(Ctor.cid)) {
 asyncFactory = Ctor
 Ctor = resolveAsyncComponent(asyncFactory, baseCtor, context)
 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 就與之前不同，這里為一個 function

function (resolve, reject) {
 // 利用 setTimeout 模擬請求
 setTimeout(function () {
  // 向 `resolve` 回調傳遞組件定義
  resolve({
   template: '<div>I am async!</div>'
  })
 }, 1000)
}

之后調用 resolveAsyncComponent(asyncFactory, baseCtor, context)

resolveAsyncComponent 在源碼的 resolveAsyncComponent。

resolveAsyncComponent 的主要功能是定義 Ctor 所需要的 resolve 、reject 函數

// factory 為 Ctor
factory(resolve, reject)

以 resolve 函數為例

const resolve = once((res: Object | Class<Component>) => {
 // 緩存 resolved
 factory.resolved = ensureCtor(res, baseCtor)
 // 強制渲染
 if (!sync) {
 	forceRender(true)
 }
})

once 字面理解，就是只調用一次。當 Ctor 中 setTimeout 結束時調用。

ensureCtor 就是 Vue.extend 的封裝以適應不同場景，所以 resolve 函數的主要功能就是在異步完成時，將得到的 Ctor 轉化為構造函數，緩存在 factory.resolved 中。

之后利用 forceRender(true) 強制重新 render，由于之前緩存了 factory.resolved，resolveAsyncComponent 函數就直接返回了組件的構造函數。

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

關于“Vue中動態組件和異步組件實例分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。