vue3笔记案例——Suspense使用之骨架屏

<template>
  <Suspense>
    <template #default>
      <NoteList />
    </template>
    <template #fallback>
      <div class="note-list-loading">
        <!-- 这里可以放置加载时的动画或静态骨架屏图片 -->
      </div>
    </template>
  </Suspense>
</template>
 
<script setup>
import { ref } from 'vue'
import NoteList from './NoteList.vue'
 
// 假设有异步数据加载函数
const fetchNotes = async () => {
  // 模拟异步获取数据
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([{ id: 1, title: 'Note 1' }])
    }, 1000)
  })
}
 
const notes = ref([])
 
fetchNotes().then(data => {
  notes.value = data
})
</script>
 
<style scoped>
.note-list-loading {
  /* 骨架屏样式 */
}
</style>

这个代码示例展示了如何在Vue 3应用中使用Suspense来处理异步组件加载的情况，并通过骨架屏来优化用户体验。在实际应用中，骨架屏可以是一个加载动画或者是组件加载过程中的静态图片。这样用户在等待数据加载时可以保持一个良好的视觉反馈，提升用户体验。