suspense(Vue.js 3.0 中Suspense組件的作用是什么)

Suspense組件到底是什么?

Suspense組件用于在等待某個異步組件解析時顯示后備內容。

你可能會想我們會在什么時候使用異步組件?

老實說,超出你的想象。每當我們希望組件等待數據獲取時(通常在異步API調用中),我們都可以使用Vue3 Composition API制作異步組件。

以下是異步組件有用的一些實例:

• 在頁面加載之前顯示加載動畫

• 顯示占位符內容

• 處理延遲加載的圖像

以前,在Vue2中,我們必須使用條件(例如 v-if 或 v-else)來檢查我們的數據是否已加載并顯示后備內容。

但是現在,Suspense隨Vue3內置了,因此我們不必擔心跟蹤何時加載數據并呈現相應的內容。

好吧...那我們如何實現Suspense

在這個例子中,我們有一個異步的 ArticleInfo.vue 組件。由于本文的重點是Suspense,而不是Composition API,因此,不會對這些細節進行瘋狂的詳細介紹。如果您對更完整的Composition API教程感興趣,請參閱此處。

簡而言之,只需知道 setup 方法可以像其他方法一樣被設置為異步的。

對于我們的示例,ArticleInfo將具有異步 setup 方法,該方法將在返回之前加載用戶數據。

asyncfunctiongetArticleInfo(){//一些異步API調用return{article}}exportdefault{asyncsetup(){var{article}=awaitgetArticleInfo()return{article}}}

然后,假設我們有一個 ArticlePost.vue 組件,其中包含我們的ArticleInfo組件。

如果我們要在等待組件獲取數據并解析時顯示“正在拼了命的加載…”之類的內容,則只需三個步驟即可實現Suspense。

• 將異步組件包裝在<template #default>標記中

• 在我們的Async組件的旁邊添加一個兄弟姐妹,標簽為<template #fallback>。

• 將兩個組件都包裝在<suspense>組件中

使用插槽,Suspense將渲染后備內容,直到默認內容準備就緒。然后,它將自動切換以顯示我們的異步組件。

看起來會像這樣。

<Suspense><template#default><article-info/></template><template#fallback><p>正在拼了命的加載&hellip;</p></template></Suspense>

你還可以捕獲組件錯誤

Vue的另一個很酷的功能,尤其是當我們開始使用異步組件時,可以捕獲錯誤并向用戶顯示一些錯誤消息。

即使在Vue2中,也可以使用 errorCaptured 鉤子函數實現,但是在Vue3中,它已重命名為 onErrorCaptured。

無論調用什么,此鉤子函數都會在捕獲到任何后代組件的錯誤時運行。如果出現問題,我們可以將其與Suspense一起使用以渲染錯誤。

如果我們處理了一個錯誤以顯示錯誤消息,則上面的組件將是這樣。

<template><pv-if="errMsg">{{errMsg}}</p><Suspensev-else><template#default><article-info/></template><template#fallback><p>正在拼了命的加載&hellip;</p></template></Suspense></template><script>import{onErrorCaptured}from'vue'setup(){consterrMsg=ref(null)onErrorCaptured(e=>{errMsg.value='呃,出了點問題!'returntrue})}return{error}</script>

看完上述內容,你們對Vue.js 3.0 中Suspense組件的作用是什么有進一步的了解嗎?如果還想了解更多知識或者相關內容,請關注本站行業資訊頻道,感謝大家的支持。