Vue3非同步組件Suspense如何使用

Suspense元件

官網中有提到他是屬於實驗性功能：
<suspense></suspense> 是實驗性功能。它不一定會最終成為穩定功能，並且在穩定之前相關 API 也可能會發生變化。
<suspense></suspense> 是內建元件，用來在元件樹中協調對非同步依賴的處理。它讓我們可以在元件樹上層等待下層的多個嵌套非同步依賴項解析完成，並且可以在等待時渲染一個載入狀態。

意思是此元件用來等待非同步元件時渲染一些額外內容，讓應用程式有更好的使用者體驗

要了解 <suspense> </suspense> 所解決的問題和它是如何與非同步依賴互動的，我們需要想像這樣一種元件層級結構：

<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus>（组件有异步的 setup()）
   └─ <Content>
      ├─ <ActivityFeed> （异步组件）
      └─ <Stats>（异步组件）

在這個元件樹中有多個嵌套元件，要渲染出它們，首先得解析一些非同步資源。如果沒有 <suspense></suspense>，則它們每個都需要處理自己的載入、封包錯誤和完成狀態。在最壞的情況下，我們可能會在頁面上看到三個旋轉的載入態，在不同的時間顯示出內容。

有了 <suspense></suspense> 元件後，我們就可以在等待整個多層級元件樹中的各個非同步依賴取得結果時，在頂層顯示出載入中或載入失敗的狀態。

接下來看個簡單的例子：

首先需要引入非同步元件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

簡潔一些就是用元件實現異步的載入的這麼一個效果

Home父元件程式碼如下：

<template>
  <div class="home">
    <h4>我是Home组件</h4>
    <Suspense>
       <template #default>
        <Child />
      </template>
      <template v-slot:fallback>
        <h4>Loading...</h4>
      </template>
    </Suspense>
  </div>
</template>
 
<script >
// import Child from &#39;./components/Child&#39;//静态引入
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">
    <h4>我是Child组件</h4>
    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>

#根據插槽機制,來區分元件, #default 插槽裡面的內容就是你需要渲染的非同步元件; #fallback 就是你指定的載入中的靜態元件。

效果如下：

以上是Vue3非同步組件Suspense如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！