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

　　現(xiàn)在我們可以用Vue3來作為一個(gè)實(shí)現(xiàn)方法，即defineAsyncComponent，這個(gè)方法可以傳遞兩種類型的參數(shù)，分別是函數(shù)類型和對(duì)象類型，接下來我們分別學(xué)習(xí)。

　　傳遞工廠函數(shù)作為參數(shù)

　　defineAsyncComponent方法接收一個(gè)工廠函數(shù)是它的基本用法，這個(gè)工廠函數(shù)必須返回一個(gè)Promise，Promise的resolve應(yīng)該返回一個(gè)組件。

　　我們這里以Vue Cli創(chuàng)建的項(xiàng)目為例，這里我稍微做了一下修改，將頭部的圖片拆分為一個(gè)組件，代碼如下：

　　<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>

　　現(xiàn)在我們就將<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'

　　// 簡(jiǎn)單用法

　　const HelloWorld = defineAsyncComponent(() =>

　　import('./components/HelloWorld.vue'),

　　)

　　</script>

　　我們這里為了看到效果，將import延遲執(zhí)行，示例代碼如下：

　<script setup>
　　import { defineAsyncComponent } from 'vue'
　　import LogoImg from './components/LogoImg.vue'
　　// 定義一個(gè)耗時(shí)執(zhí)行的函數(shù)，t 表示延遲的時(shí)間， callback 表示需要執(zhí)行的函數(shù)，可選
　　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>

　　代碼運(yùn)行結(jié)果如下所示：

　　當(dāng)2s后才會(huì)加載<hello-world>組件。

　　傳遞對(duì)象類型作為參數(shù)

　　defineAsyncComponent方法也可以接收一個(gè)對(duì)象作為參數(shù)，該對(duì)象中有如下幾個(gè)參數(shù)：

　　loader：同工廠函數(shù)；

　　loadingComponent：加載異步組件時(shí)展示的組件；

　　errorComponent：加載組件失敗時(shí)展示的組件；

　　delay：顯示loadingComponent之前的延遲時(shí)間，單位毫秒，默認(rèn)200毫秒；

　　timeout：如果提供了timeout，并且加載組件的時(shí)間超過了設(shè)定值，將顯示錯(cuò)誤組件，默認(rèn)值為Infinity（單位毫秒）；

　　suspensible：異步組件可以退出<Suspense>控制，并始終控制自己的加載狀態(tài)。

　　onError：一個(gè)函數(shù)，該函數(shù)包含4個(gè)參數(shù)，分別是error、retry、fail和attempts，這4個(gè)參數(shù)分別是錯(cuò)誤對(duì)象、重新加載的函數(shù)、加載程序結(jié)束的函數(shù)、已經(jīng)重試的次數(shù)。

　　如下代碼展示defineAsyncComponent方法的對(duì)象類型參數(shù)的用法：

　　<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'
　　// 定義一個(gè)耗時(shí)執(zhí)行的函數(shù)，t 表示延遲的時(shí)間， callback 表示需要執(zhí)行的函數(shù)，可選
　　const time = (t, callback = () => {}) => {
　　return new Promise(resolve => {
　　setTimeout(() => {
　　callback()
　　resolve()
　　}, t)
　　})
　　}
　　// 記錄加載次數(shù)
　　let count = 0
　　const HelloWorld = defineAsyncComponent({
　　// 工廠函數(shù)
　　loader: () => {
　　return new Promise((resolve, reject) => {
　　;(async function () {
　　await time(300)
　　const res = await import('./components/HelloWorld.vue')
　　if (++count < 3) {
　　// 前兩次加載手動(dòng)設(shè)置加載失敗
　　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 一樣：
　　// 必須調(diào)用其中一個(gè)才能繼續(xù)錯(cuò)誤處理。
　　if (attempts < 3) {
　　// 請(qǐng)求發(fā)生錯(cuò)誤時(shí)重試，最多可嘗試 3 次
　　console.log(attempts)
　　retry()
　　} else {
　　fail()
　　}
　　},
　　})
　　</script>

　　上面的代碼中，主要表達(dá)加載組件時(shí)前兩次會(huì)請(qǐng)求錯(cuò)誤，只有第三次加載才會(huì)成功，代碼運(yùn)行結(jié)果如下：

　　其實(shí)上面展示的是當(dāng)如果失敗會(huì)展示ErrorComponent組件。

　　相關(guān)文章希望大家以后多多支持！