Vue動(dòng)態(tài)組件和異步組件的區(qū)別是什么

這篇文章主要介紹“Vue動(dòng)態(tài)組件和異步組件的區(qū)別是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue動(dòng)態(tài)組件和異步組件的區(qū)別是什么”文章能幫助大家解決問(wèn)題。

前言

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

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

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

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

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

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

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

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

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

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

在源碼的 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 就與之前不同，這里為一個(gè) function

function (resolve, reject) {
 // 利用 setTimeout 模擬請(qǐng)求
 setTimeout(function () {
  // 向 `resolve` 回調(diào)傳遞組件定義
  resolve({
   template: '<div>I am async!</div>'
  })
 }, 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<Component>) => {
 // 緩存 resolved
 factory.resolved = ensureCtor(res, baseCtor)
 // 強(qiáng)制渲染
 if (!sync) {
 	forceRender(true)
 }
})

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

ensureCtor 就是 Vue.extend 的封裝以適應(yīng)不同場(chǎng)景，所以 resolve 函數(shù)的主要功能就是在異步完成時(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
}

關(guān)于“Vue動(dòng)態(tài)組件和異步組件的區(qū)別是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。