Vue動態(tài)組件和異步組件原理詳解
前言
在vue官方資料中，我們可以可以很學會如何通過vue構建“動態(tài)組件”以及“異步組件”，然而，在官方資料中，并沒有涉及到真正的“動態(tài)異步”組件，經過大量的時間研究和技術分析，我們給出目前比較合理的技術實現(xiàn)方式，并分析一下vue動態(tài)異步組件的原理
動態(tài)組件 & 異步組件的存在，使得我們更方便地控制首屏代碼的體積，加快加載速度。
拋開具體細節(jié)不談，一個普通 Vue 組件從創(chuàng)建到展現(xiàn)在頁面里，主要經歷了以下流程：
// 組件 Object
{
template: '<div>I am async!</div>'
}
// 經過 compileToFunctions 得到對應的 render function
with(this) {
return _c('div', [_v("I am async!")])
}
// 在經過 render 得到 Vnode 再 update 成為真實DOM
動態(tài)組件&異步組件與之有什么區(qū)別呢？
主要區(qū)別在于 render 中 createComponent 這一步，舉例。
// 組件
Vue.component('example', {
template: '<div>I am async!</div>'
})
普通組件在 createComponent 時，會依據開發(fā)者自定義的 options，利用 Vue.extend 生成對應的構造函數(shù)，從而得到對應的 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 函數(shù)
// factory 為 Ctor factory(resolve, reject)
以 resolve 函數(shù)為例
const resolve = once((res: Object | Class<Component>) => {
// 緩存 resolved
factory.resolved = ensureCtor(res, baseCtor)
// 強制渲染
if (!sync) {
forceRender(true)
}
})
once 字面理解，就是只調用一次。當 Ctor 中 setTimeout 結束時調用。
ensureCtor 就是 Vue.extend 的封裝以適應不同場景，所以 resolve 函數(shù)的主要功能就是在異步完成時，將得到的 Ctor 轉化為構造函數(shù)，緩存在 factory.resolved 中。
之后利用 forceRender(true) 強制重新 render，由于之前緩存了 factory.resolved，resolveAsyncComponent 函數(shù)就直接返回了組件的構造函數(shù)。
if (isDef(factory.resolved)) {
return factory.resolved
}
之后就與普通組件一致了。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。
相關文章
這篇文章主要介紹了使用typescript構建Vue應用的實現(xiàn),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家介紹了JointJS流程圖的繪制方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
vue3發(fā)送驗證碼倒計時功能的實現(xiàn)(防止連點、封裝復用)
這篇文章主要介紹了vue3發(fā)送驗證碼倒計時功能的實現(xiàn)(防止連點、封裝復用),實現(xiàn)思路是點擊發(fā)送驗證碼，驗證碼倒計時，校驗手機號是否正常等一系列操作，本文通過示例代碼介紹的非常詳細，需要的朋友可以參考下2023-01-01
這篇文章主要介紹了vue中設置height 100%無效的問題及解決方法，需要的朋友可以參考下2018-07-07
這篇文章主要介紹了前端Vue自定義地址展示地址選擇地址管理組件的示例詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
vue項目出現(xiàn)ERESOLVE could not resolve問題及解決
這篇文章主要介紹了vue項目出現(xiàn)ERESOLVE could not resolve問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js實現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中，Vue.js有幸受到一定程度的關注，下面這篇文章主要給介紹了Vue.js實現(xiàn)表格動態(tài)增加刪除的方法實例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
這篇文章主要介紹了vue如何進行動畫的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
今天小編就為大家分享一篇element UI upload組件上傳附件格式限制方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3+Three.js實現(xiàn)為模型添加點擊事件
本文主要介紹了如何在Vue3和Three.js環(huán)境中為模型添加點擊事件監(jiān)聽,具體方法是利用Three.js的Vector2和Raycaster,首先,創(chuàng)建一個Vector2對象來獲取鼠標位置；然后,創(chuàng)建一個Raycaster對象來投射光線2024-10-10