Vue3異步組件Suspense的使用方法詳解
Suspense組件
官網(wǎng)中有提到他是屬于實驗性功能：<Suspense> 是一項實驗性功能。它不一定會最終成為穩(wěn)定功能，并且在穩(wěn)定之前相關 API 也可能會發(fā)生變化。<Suspense> 是一個內置組件，用來在組件樹中協(xié)調對異步依賴的處理。它讓我們可以在組件樹上層等待下層的多個嵌套異步依賴項解析完成，并可以在等待時渲染一個加載狀態(tài)。
意思就是此組件用來等待異步組件時渲染一些額外內容，讓應用有更好的用戶體驗
要了解 <Suspense> 所解決的問題和它是如何與異步依賴進行交互的，我們需要想象這樣一種組件層級結構：
<Suspense>
└─ <Dashboard>
├─ <Profile>
│ └─ <FriendStatus>（組件有異步的 setup()）
└─ <Content>
├─ <ActivityFeed> （異步組件）
└─ <Stats>（異步組件）
在這個組件樹中有多個嵌套組件，要渲染出它們，首先得解析一些異步資源。如果沒有 <Suspense>，則它們每個都需要處理自己的加載、報錯和完成狀態(tài)。在最壞的情況下，我們可能會在頁面上看到三個旋轉的加載態(tài)，在不同的時間顯示出內容。
有了 <Suspense> 組件后，我們就可以在等待整個多層級組件樹中的各個異步依賴獲取結果時，在頂層展示出加載中或加載失敗的狀態(tài)。
接下來看個簡單的例子：
首先需要引入異步組件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
簡潔一些就是用組件實現(xiàn)異步的加載的這么一個效果
Home父組件代碼如下：
<template>
<div class="home">
<h3>我是Home組件</h3>
<Suspense>
<template #default>
<Child />
</template>
<template v-slot:fallback>
<h3>Loading...</h3>
</template>
</Suspense>
</div>
</template>
<script >
// import Child from './components/Child'//靜態(tài)引入
import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {
name: "",
components: { Child },
};
</script>
<style>
.home {
width: 300px;
background-color: gray;
padding: 10px;
}
</style>
自組件Child
<template>
<div class="child">
<h3>我是Child組件</h3>
name: {{user.name}}
age: {{user.age}}
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Child",
async setup() {
const NanUser = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: "NanChen",
age: 20,
});
},2000);
});
};
const user = await NanUser();
return {
user,
};
},
};
</script>
<style>
.child {
background-color: skyblue;
padding: 10px;
}
</style>
根據(jù)插槽機制,來區(qū)分組件, #default 插槽里面的內容就是你需要渲染的異步組件; #fallback 就是你指定的加載中的靜態(tài)組件。
效果如下：
到此這篇關于Vue3異步組件Suspense的使用方法詳解的文章就介紹到這了,更多相關Vue3異步組件Suspense的使用方法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類
這篇文章主要介紹了element-ui樹形控件后臺返回的數(shù)據(jù)+生成組織樹的工具類，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章主要為大家詳細介紹了vue使用watch監(jiān)聽props的一些小建議,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要為大家詳細介紹了如何使用vue3實現(xiàn)自定義導航菜單,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-11-11
這篇文章主要介紹了Vue中的計算屬性computed傳參方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能(車輛模擬地圖)
最近在做車輛模擬地圖,在實現(xiàn)控制站點名稱按需顯示,下面通過本文給大家分享vue3實現(xiàn)模擬地圖站點名稱按需顯示的功能,感興趣的朋友跟隨小編一起看看吧2024-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)掃碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要介紹了說說Vuex的getters屬性的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式
這篇文章主要介紹了vue3?element?plus?table?selection展示數(shù)據(jù),默認選中功能方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04
VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項目的新手同學來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關于VsCode工具開發(fā)vue項目必裝插件的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-09-09