建站
咨詢
售后
建站咨詢
新聞中心
懶加載組件是一種改善應(yīng)用程序用戶體驗(yàn)的簡便方法，尤其是在我們的代碼包很大或用戶連接速度較慢的情況下。
在尋甸等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作 網(wǎng)站設(shè)計(jì)制作定制制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),品牌網(wǎng)站設(shè)計(jì),全網(wǎng)整合營銷推廣,成都外貿(mào)網(wǎng)站建設(shè)公司,尋甸網(wǎng)站建設(shè)費(fèi)用合理。
Vue3引入了一些新功能，可通過改進(jìn)異步組件API和新的Suspense組件來幫助我們實(shí)現(xiàn)友好的用戶體驗(yàn)。
用戶訪問應(yīng)用程序時(shí)，無需立即加載UI的某些部分，例如，諸如模態(tài)框和工具提示之類的動(dòng)態(tài)UI功能。此外，如果我們使用的是單頁面應(yīng)用程序體系結(jié)構(gòu)，則頁面上的內(nèi)容 看不見的頁面也不應(yīng)加載，直到需要為止。
示例
在此示例應(yīng)用程序中，我們的應(yīng)用程序顯示一個(gè)ChatWindow組件，如果用戶經(jīng)過身份驗(yàn)證，該組件將加載。
我們假設(shè)只能在運(yùn)行時(shí)確定身份驗(yàn)證，并且該組件很大。由于這些原因，我們需要要懶加載它。
Chat with friends here
使用Vue3異步組件API進(jìn)行懶加載
Vue 3引入了defineAsyncComponent API，所以實(shí)現(xiàn)懶加載組件是非常簡單的。
defineAsyncComponent 可以接受一個(gè)返回 Promise 的工廠函數(shù)。Promise 的 resolve 回調(diào)應(yīng)該在服務(wù)端返回組件定義后被調(diào)用。你也可以調(diào)用 reject(reason) 來表示加載失敗。
構(gòu)建后，任何動(dòng)態(tài)導(dǎo)入的組件都會(huì)作為一個(gè)單獨(dú)的文件。
- File Size
- dist/js/chunk-vendors.f11402df.js 82.39 KiB
- dist/js/app.ada103fb.js 20.59 KiB
- dist/js/ChatWindow.3c1708e4.js 5.47 KiB
- dist/css/app.8221c481.css 1.76 KiB
- dist/css/ChatWindow.f16731cd.css 2.75 KiB
loading-state 內(nèi)容
懶加載的缺點(diǎn)是需要團(tuán)隊(duì)交流，多次請(qǐng)求造成渲染參差不齊。處理此問題的一種方法加載組件時(shí)顯示 loading-state組件。
如下圖所示，組件在加載時(shí)，我們顯示一個(gè) loading 畫面，加載后在顯示加載的組件內(nèi)容。
defineAsyncComponent 可以接受一個(gè)對(duì)象：其中有個(gè) loadingComponent 屬性，表示加載異步組件時(shí)要使用的組件。
與 Suspense 一起使用
上面使用loading-state的方法效果是挺好的，但有一點(diǎn)限制。例如，我們可能希望將prop傳遞到加載狀態(tài)組件，將內(nèi)容傳遞到其插槽等，而使用異步組件API則不容易實(shí)現(xiàn)。
為了增加靈活性，我們可以使用Vue3中新出Suspense組件。這使我們能夠使用插槽確定模板級(jí)別的異步加載內(nèi)容。
Suspense 是全局組件(例如transition)，可以在Vue 3應(yīng)用程序中的任何位置使用。要使用它，需要在模板中聲明它，并包括兩個(gè)命名的插槽：default和fallback。
Suspense 會(huì)確保在加載異步內(nèi)容時(shí)顯示默認(rèn)插槽，并將fallback 插槽用作加載狀態(tài)。
Chat with friends here
異步組件在默認(rèn)情況下是可掛起的。這意味著如果它在父鏈中有一個(gè) ，它將被視為該 的異步依賴。在這種情況下，加載狀態(tài)將由 控制，組件自身的加載、錯(cuò)誤、延遲和超時(shí)選項(xiàng)都將被忽略。
異步組件可以選擇退出 Suspense 控制，并可以在其選項(xiàng)中指定 suspensible:false，讓組件始終控制自己的加載狀態(tài)。
你可以在 API 參考查看更多可用的選項(xiàng)。
~完，我是小智，去SPA了，下期見!
作者：Matt Maribojoc 譯者：前端小智 來源：stackabuse
原文：https://vuejsdevers.com/2020/07/13/vue-async-components-suspense/
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
分享名稱：Vue3用戶體驗(yàn)的增加：異步組件與Suspense組件
轉(zhuǎn)載來源：http://www.5511xx.com/article/djijids.html
