今天就跟大家聊聊有關(guān)Vue中動態(tài)組件和異步組件的原理是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)漳浦,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

前言

在vue官方資料中，我們可以可以很學(xué)會如何通過vue構(gòu)建“動態(tài)組件”以及“異步組件”，然而，在官方資料中，并沒有涉及到真正的“動態(tài)異步”組件，經(jīng)過大量的時間研究和技術(shù)分析，我們給出目前比較合理的技術(shù)實(shí)現(xiàn)方式，并分析一下vue動態(tài)異步組件的原理

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

拋開具體細(xì)節(jié)不談，一個普通 Vue 組件從創(chuàng)建到展現(xiàn)在頁面里，主要經(jīng)歷了以下流程：

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

動態(tài)組件&異步組件與之有什么區(qū)別呢？

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

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

普通組件在 createComponent 時，會依據(jù)開發(fā)者自定義的 options，利用 Vue.extend 生成對應(yīng)的構(gòu)造函數(shù)，從而得到對應(yīng)的 Vnode 。而一個異步組件

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

則是要經(jīng)過一系列處理，具體過程如下

在源碼的 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` 回調(diào)傳遞組件定義
  resolve({
   template: '
I am async!
'
  })
 }, 1000)
}

之后調(diào)用 resolveAsyncComponent(asyncFactory, baseCtor, context)

resolveAsyncComponent 在源碼的 resolveAsyncComponent。

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

// factory 為 Ctor
factory(resolve, reject)

以 resolve 函數(shù)為例

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

once 字面理解，就是只調(diào)用一次。當(dāng) Ctor 中 setTimeout 結(jié)束時調(diào)用。

ensureCtor 就是 Vue.extend 的封裝以適應(yīng)不同場景，所以 resolve 函數(shù)的主要功能就是在異步完成時，將得到的 Ctor 轉(zhuǎn)化為構(gòu)造函數(shù)，緩存在 factory.resolved 中。

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

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

看完上述內(nèi)容，你們對Vue中動態(tài)組件和異步組件的原理是什么有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。