在Vue3中，引入了一個全新的核心組件——Suspense，它為異步組件的加載和錯誤處理提供了原生支持。Suspense組件的主要作用是在等待異步內(nèi)容（如組件、數(shù)據(jù)等）加載時，顯示一個備用或加載狀態(tài)的內(nèi)容。

一、Suspense 簡介

Suspense 是Vue3響應(yīng)式系統(tǒng)中的一個重要組成部分，其設(shè)計(jì)理念源于React社區(qū)，并根據(jù)Vue生態(tài)的特點(diǎn)進(jìn)行了優(yōu)化。當(dāng)Suspense包裹的異步組件還未準(zhǔn)備好渲染時，它會顯示提供的fallback內(nèi)容，直到所有異步組件完成加載。

二、基本使用

在實(shí)際開發(fā)中，Suspense常用于配合路由組件的懶加載或者其他異步加載場景。以下是一個基本的示例：

<template>
  <Suspense>
    <!-- 當(dāng)內(nèi)部組件加載完畢后，此處將顯示Foo組件 -->
    <template #default>
      <router-view />
    </template>

    <!-- 當(dāng)內(nèi)部組件還在加載時，顯示此占位符內(nèi)容 -->
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

在這個例子中，router-view會被視為一個異步組件，當(dāng)路由切換到一個新的頁面，對應(yīng)的組件開始異步加載時，如果尚未加載完成，Suspense就會顯示fallback部分的內(nèi)容，即“Loading...”。

三、結(jié)合Vue Router進(jìn)行懶加載

結(jié)合Vue Router，我們可以輕松實(shí)現(xiàn)路由組件的懶加載并利用Suspense來處理加載狀態(tài)：

import { createRouter, createWebHistory } from 'vue-router';
import { Suspense } from 'vue';

const routes = [
  {
    path: '/foo',
    component: () => import(/* webpackChunkName: "foo" */ './views/Foo.vue'),
  },
  // ...
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 在App.vue或其他合適的布局組件中包裹router-view
<template>
  <Suspense>
    <template #default>
      <router-view />
    </template>
    <template #fallback>
      <div class="loading-spinner">Loading...</div>
    </template>
  </Suspense>
</template>

四、高級用法：多個異步組件

Suspense還可以同時處理多個異步組件的情況。每個異步組件都可以有自己的加載狀態(tài)：

<Suspense>
  <template #default>
    <ComponentA />
    <ComponentB />
  </template>
  <template #fallback>
    <div>Loading components...</div>
  </template>
</Suspense>

在這里，如果ComponentA和ComponentB都是異步加載的，那么只有當(dāng)它們都加載完成后，Suspense才會顯示它們的實(shí)際內(nèi)容。

五、總結(jié)

綜上所述，Vue3中的Suspense組件極大地增強(qiáng)了對異步內(nèi)容加載的控制能力，使得開發(fā)者能夠更好地管理應(yīng)用的狀態(tài)和用戶體驗(yàn)。通過合理地配置Suspense及其fallback內(nèi)容，可以有效避免頁面空白或閃爍的問題，提升用戶對于異步加載內(nèi)容的感知度和滿意度。