摘要

<Suspense> 是一個內建元件，用於協調元件樹中的非同步依賴。它可以在等待內部非同步元件載入完成時，渲染一個備用的載入狀態。

定義與說明

<Suspense> 提供兩個插槽：#default 和 #fallback。Vue 會首先顯示 #fallback 插槽的內容。當 #default 插槽中所有的非同步元件（使用 defineAsyncComponent 建立）或非同步 setup 函數都解析完成後，Vue 會自動切換，顯示 #default 插槽的內容。

實作範例

Vue SFC

<script setup>
import { defineAsyncComponent } from 'vue';
const UserProfile = defineAsyncComponent(() => import('./UserProfile.vue'));
</script>

<template>
  <Suspense>
    <!-- 當 UserProfile 載入完成時顯示 -->
    <template #default>
      <UserProfile />
    </template>
    <!-- UserProfile 正在載入時顯示 -->
    <template #fallback>
      <div>正在載入使用者資料...</div>
    </template>
  </Suspense>
</template>

結論

<Suspense> 提供了一種直接在模板層面處理非同步載入狀態的強大模式，簡化了過去需要手動管理 isLoading 狀態的繁瑣邏輯。注意：此功能目前仍處於實驗性階段。

Suspense 非同步載入實驗性