Vue中動(dòng)態(tài)組件和異步組件的原理是什么-創(chuàng)新互聯(lián)

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

公司主營(yíng)業(yè)務(wù)：做網(wǎng)站、網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。創(chuàng)新互聯(lián)推出烏魯木齊免費(fèi)做網(wǎng)站回饋大家。

前言

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

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

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

// 組件 Object
{
 template: '<div>I am async!</div>'
}
// 經(jīng)過 compileToFunctions 得到對(duì)應(yīng)的 render function 
with(this) {
 return _c('div', [_v("I am async!")])
}
// 在經(jīng)過 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ù)開發(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)過一系列處理，具體過程如下

在源碼的 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
}

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

標(biāo)題名稱：Vue中動(dòng)態(tài)組件和異步組件的原理是什么-創(chuàng)新互聯(lián)
分享URL：http://muchs.cn/article2/dieiic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、Google、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容