Vue?3?進(jìn)階用法之異步組件
一、代碼分割
一個(gè)大型前端應(yīng)用，如果所有代碼都放在單一文件，體積會(huì)特別大，下載時(shí)間長(zhǎng)，白屏?xí)r間久，用戶體驗(yàn)差。
代碼分割是一種有效的優(yōu)化方式。提前把代碼切分為多個(gè)小塊，只下載當(dāng)前必需的部分，用到哪塊下載哪塊。就像吃自助餐一樣，吃多少拿多少。
早期的代碼分割一般通過webpack實(shí)現(xiàn)。隨著 ES6 的不斷流行，原生的import()成為更好的選擇。
使用 import() 和《Vue 3 基礎(chǔ)用法：組件入門》介紹的動(dòng)態(tài)組件，可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的代碼分割[2]。
實(shí)際運(yùn)行效果如圖：
上面代碼“糙快猛”地實(shí)現(xiàn)了代碼分割，但是離“完美”還有一些差距：
如果組件報(bào)錯(cuò)，怎么處理？
如果加載時(shí)間長(zhǎng)，如何處理？
如果加載超時(shí)，怎么辦？
二、異步組件
為了解決加載組件中出現(xiàn)的報(bào)錯(cuò)、超時(shí)、狀態(tài)展示等問題，可以使用 Vue 3 提供的異步組件（Async Components），它對(duì)于加載過程做了更細(xì)致的控制。
使用defineAsyncComponent() 函數(shù)定義異步組件。它有幾個(gè)主要選項(xiàng)：
loader：加載函數(shù)，用于加載指定的目標(biāo)組件
loadingComponent：加載過程中的替身組件
errorComponent：加載失敗的替罪羊組件
delay：設(shè)定替身組件出現(xiàn)的延遲時(shí)間。如果加載時(shí)間夠快，替身可以不用出場(chǎng)。默認(rèn)值是 200ms。
timeout：設(shè)定超時(shí)時(shí)間，超過這個(gè)時(shí)間就算加載失敗。默認(rèn)值是 Infinity，即永不超時(shí)。
實(shí)例代碼如下：
加載中的狀態(tài)：
加載成功的狀態(tài)：
加載失敗的狀態(tài)：
三、異步組件的簡(jiǎn)寫形式
如果你不需要那么多狀態(tài)切換，可以使用異步組件的簡(jiǎn)寫形式。只需要傳入 loader 選項(xiàng)對(duì)應(yīng)的加載函數(shù)即可。
到此這篇關(guān)于Vue 3 進(jìn)階用法：異步組件的文章就介紹到這了,更多相關(guān)Vue 3 異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實(shí)戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開發(fā)中,Vue.js 是一個(gè)非常流行的框架,因其易學(xué)易用而受到許多開發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開發(fā)中的常見需求,本文將探討如何在 Vue 中實(shí)現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本篇文章主要介紹了vue組件之Alert的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
vue3-print-nb實(shí)現(xiàn)頁面打印(含分頁打印)示例代碼
大多數(shù)后臺(tái)系統(tǒng)中都存在打印的需求,在有打印需求時(shí),對(duì)前端來說當(dāng)然是直接打印頁面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實(shí)現(xiàn)頁面打印(含分頁打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
vue項(xiàng)目中使用window的onresize事件方式
這篇文章主要介紹了vue項(xiàng)目中使用window的onresize事件方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08