引言

這次大致功能出來
遇見了問題
書頁列表在跑資料時總是會有閃白畫面
我們發現了個用法
可以處理這方面問題....

Vue 3 的 Suspense

可以用於管理非同步資料載入和錯誤處理
它的主要作用是在元件渲染過程中
可以處理非同步資料載入的狀態
並根據載入狀態顯示不同的內容
從而提高了應用程式的可維護性和使用者體驗

程式碼範例

<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

在初始渲染時，將在記憶體中渲染其預設的插槽內容。如果在這個過程中遇到任何非同步依賴，則會進入掛起狀態。在掛起狀態期間，展示的是後備內容。當所有遇到的非同步依賴都完成後，會進入完成狀態，並將顯示預設插槽的內容。

如果在初次渲染時沒有遇到非同步依賴，會直接進入完成狀態。

進入完成狀態後，只有當預設插槽的根節點被替換時，才會回到掛起狀態。元件樹中新的更深層的非同步依賴不會造成回退到掛起狀態。

發生回退時，後備內容不會立即呈現。相反，在等待新內容和非同步依賴完成時，會展示先前#default插槽的內容。這個行為可以透過一個timeoutprop 進行設定：在等待渲染新內容耗時超過timeout之後，將會切換為展示後備內容。若timeout值為0將導致在取代預設內容時立即顯示後備內容。

有了先備概念後，就開始吧

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getBookPages } from '../firebase'; // 假设这里有获取数据的函数
import { DocumentData } from 'firebase/firestore';
  
  const books = ref<DocumentData[]>([]);
  
onMounted(async () => {
   
  setTimeout(async () => {
    books.value = await getBookPages(4, 1); // 获取书单数据
  }, 8000); 
  });


</script>

<template>
    <div>
      <h1>書單Suspense</h1>
      <Suspense>
        <template #default>
          <div>
            <h2>書單</h2>
            <ul>
              <li v-for="book in books" :key="book.id">
                {{ book.bookTitle }}
              </li>
            </ul>
          </div>
        </template>
        <template #fallback>
          <h2 bg="red" >Loading...</h2>
        </template>
      </Suspense>
    </div>
  </template>