一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法
前言
當我們的項目達到一定的規模時,對於某些組件來說,我們並不希望一開始全部加載,而是需要的時候進行加載;這樣的做得目的可以很好的提高用戶體驗。
為瞭實現這個功能,Vue3中為我們提供瞭一個方法,即defineAsyncComponent
,這個方法可以傳遞兩種類型的參數,分別是函數類型和對象類型,接下來我們分別學習。
傳遞工廠函數作為參數
defineAsyncComponent
方法接收一個工廠函數是它的基本用法,這個工廠函數必須返回一個Promise
,Promise
的resolve
應該返回一個組件。
我們這裡以Vue Cli創建的項目為例,這裡我稍微做瞭一下修改,將頭部的圖片拆分為一個組件,代碼如下:
<template> <logo-img /> <hello-world msg="Welcome to Your Vue.js App" /> </template> <script setup> import LogoImg from './components/LogoImg.vue' import HelloWorld from './components/HelloWorld.vue' </script>
現在我們就將<hello-world>
組件修改為異步組件,示例代碼如下:
<template> <logo-img /> <hello-world msg="Welcome to Your Vue.js App" /> </template> <script setup> import { defineAsyncComponent } from 'vue' import LogoImg from './components/LogoImg.vue' // 簡單用法 const HelloWorld = defineAsyncComponent(() => import('./components/HelloWorld.vue'), ) </script>
我們這裡為瞭看到效果,將import
延遲執行,示例代碼如下:
<script setup> import { defineAsyncComponent } from 'vue' import LogoImg from './components/LogoImg.vue' // 定義一個耗時執行的函數,t 表示延遲的時間, callback 表示需要執行的函數,可選 const time = (t, callback = () => {}) => { return new Promise(resolve => { setTimeout(() => { callback() resolve() }, t) }) } // 定義異步組件,這裡這樣寫是為瞭查看效果 const HelloWorld = defineAsyncComponent(() => { return new Promise((resolve, reject) => { ;(async function () { try { await time(2000) const res = await import('./components/HelloWorld.vue') resolve(res) } catch (error) { reject(error) } })() }) }) </script>
代碼運行結果如下所示:
當2s後才會加載<hello-world>
組件。
傳遞對象類型作為參數
defineAsyncComponent
方法也可以接收一個對象作為參數,該對象中有如下幾個參數:
loader
:同工廠函數;loadingComponent
:加載異步組件時展示的組件;errorComponent
:加載組件失敗時展示的組件;delay
:顯示loadingComponent
之前的延遲時間,單位毫秒,默認200毫秒;timeout
:如果提供瞭timeout
,並且加載組件的時間超過瞭設定值,將顯示錯誤組件,默認值為Infinity
(單位毫秒);suspensible
:異步組件可以退出<Suspense>
控制,並始終控制自己的加載狀態。onError
:一個函數,該函數包含4個參數,分別是error
、retry
、fail
和attempts
,這4個參數分別是錯誤對象、重新加載的函數、加載程序結束的函數、已經重試的次數。
如下代碼展示defineAsyncComponent
方法的對象類型參數的用法:
<template> <logo-img /> <hello-world msg="Welcome to Your Vue.js App" /> </template> <script setup> import { defineAsyncComponent } from 'vue' import LogoImg from './components/LogoImg.vue' import LoadingComponent from './components/loading.vue' import ErrorComponent from './components/error.vue' // 定義一個耗時執行的函數,t 表示延遲的時間, callback 表示需要執行的函數,可選 const time = (t, callback = () => {}) => { return new Promise(resolve => { setTimeout(() => { callback() resolve() }, t) }) } // 記錄加載次數 let count = 0 const HelloWorld = defineAsyncComponent({ // 工廠函數 loader: () => { return new Promise((resolve, reject) => { ;(async function () { await time(300) const res = await import('./components/HelloWorld.vue') if (++count < 3) { // 前兩次加載手動設置加載失敗 reject(res) } else { // 大於3次成功 resolve(res) } })() }) }, loadingComponent: LoadingComponent, errorComponent: ErrorComponent, delay: 0, timeout: 1000, suspensible: false, onError(error, retry, fail, attempts) { // 註意,retry/fail 就像 promise 的 resolve/reject 一樣: // 必須調用其中一個才能繼續錯誤處理。 if (attempts < 3) { // 請求發生錯誤時重試,最多可嘗試 3 次 console.log(attempts) retry() } else { fail() } }, }) </script>
上面的代碼中,我們加載組件時前兩次會請求錯誤,隻有第三次加載才會成功,代碼運行結果如下:
如果加載失敗則會展示ErrorComponent
組件。
總結
到此這篇關於一文搞懂Vue3中的異步組件defineAsyncComponentAPI的用法的文章就介紹到這瞭,更多相關Vue3異步組件內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- vue3 vite異步組件及路由懶加載實戰示例
- vue中Promise的使用方法詳情
- JavaScript異步隊列進行try catch時的問題解決
- JS異步代碼單元測試之神奇的Promise
- 淺談JS三座大山之異步和單線程