為了更好的提升用戶的體驗，我們要縮短加載的時間，要一些組件僅在需要的時候才加載這樣極大的節約加載時間，提升用戶訪問效果。

　　現在我們可以用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組件。

　　相關文章希望大家以后多多支持！