Suspense組件是Vue3中的知名功能之一。

它們允許我們的應(yīng)用程序在等待異步組件時渲染一些后備內(nèi)容，可以讓我們創(chuàng)建一個平滑的用戶體驗。

值得慶幸的是，Suspense組件非常容易理解，它們甚至不需要任何額外的導(dǎo)入!

本文內(nèi)容：

• 什么是Suspense組件
• 何時使用它
• 如何使用

Suspense組件到底是什么?

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

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

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

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

• 在頁面加載之前顯示加載動畫
• 顯示占位符內(nèi)容
• 處理延遲加載的圖像

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

但是現(xiàn)在，Suspense隨Vue3內(nèi)置了，因此我們不必?fù)?dān)心跟蹤何時加載數(shù)據(jù)并呈現(xiàn)相應(yīng)的內(nèi)容。

好吧...那我們?nèi)绾螌崿F(xiàn)Suspense

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

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

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

async function getArticleInfo() { 
  // 一些異步API調(diào)用 
  return { article } 
}export default { 
  async setup () {    var { article } = await getArticleInfo() 
    return { 
      article    }  }} 

然后，假設(shè)我們有一個 ArticlePost.vue 組件，其中包含我們的ArticleInfo組件。

如果我們要在等待組件獲取數(shù)據(jù)并解析時顯示“正在拼了命的加載…”之類的內(nèi)容，則只需三個步驟即可實現(xiàn)Suspense。

• 將異步組件包裝在<template #default>標(biāo)記中
• 在我們的Async組件的旁邊添加一個兄弟姐妹，標(biāo)簽為<template #fallback>。
• 將兩個組件都包裝在<suspense>組件中

使用插槽，Suspense將渲染后備內(nèi)容，直到默認(rèn)內(nèi)容準(zhǔn)備就緒。然后，它將自動切換以顯示我們的異步組件。

看起來會像這樣。

<Suspense> 
  <template #default> 
    <article-info/> 
  </template> 
  <template #fallback> 
    <div>正在拼了命的加載…</div> 
  </template> 
</Suspense> 

你還可以捕獲組件錯誤

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

即使在Vue2中，也可以使用 errorCaptured 鉤子函數(shù)實現(xiàn)，但是在Vue3中，它已重命名為 onErrorCaptured。

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

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

<template> 
  <div v-if="errMsg"> {{ errMsg }} </div> 
  <Suspense v-else> 
    <template #default> 
      <article-info/> 
    </template> 
    <template #fallback> 
      <div>正在拼了命的加載…</div> 
    </template> 
  </Suspense> 
</template> 
<script> 
import { onErrorCaptured } from 'vue' 
setup () { 
  const errMsg = ref(null) 
  onErrorCaptured(e => { 
    errMsg.value = '呃，出了點問題！' 
    return true 
  })} 
  return { error } 
</script> 

結(jié)束

Suspense只是Vue使開發(fā)人員更容易解決常見問題的另一種方式。不必有條件地渲染組件，我們只需使用Suspense來為我們處理事情。

我認(rèn)為，這是Vue3中最簡潔的功能之一。

現(xiàn)在，你應(yīng)該對Vue中的Suspense組件有了更多的了解，并且已經(jīng)想到了一些很酷的方法來開始將它們實現(xiàn)到你的項目中!