1
<template>
2
  <div class="app">
3
    <h1>我的仪表盘</h1>
4
    <Suspense @pending="onPending" @resolve="onResolve" @fallback="onFallback">
5
      <template #default>
6
        <Dashboard />
7
      </template>
8
      <template #fallback>
9
        <div class="loading-container">
10
          <LoadingSpinner />
11
          <p>正在加载仪表盘数据...</p>
12
        </div>
13
      </template>
14
    </Suspense>
15
  </div>
16
</template>
17

18
<script setup>
19
import { defineAsyncComponent } from 'vue'
20
import LoadingSpinner from './components/LoadingSpinner.vue'
21

22
const Dashboard = defineAsyncComponent(() =>
23
  import('./components/Dashboard.vue')
24
)
25

26
function onPending() {
27
  console.log('开始加载...')
28
}
29

30
function onResolve() {
31
  console.log('加载完成！')
32
}
33

34
function onFallback() {
35
  console.log('显示 fallback 内容')
36
}
37
</script>

1
<template>
2
  <div class="dashboard">
3
    <div class="stats">
4
      <StatCard v-for="stat in stats" :key="stat.id" :stat="stat" />
5
    </div>
6
    <RecentActivity :activities="activities" />
7
    <Chart :data="chartData" />
8
  </div>
9
</template>
10

11
<script setup>
12
// 所有数据在 setup 阶段并行获取
13
const [statsRes, activitiesRes, chartRes] = await Promise.all([
14
  fetch('/api/stats'),
15
  fetch('/api/activities'),
16
  fetch('/api/chart-data')
17
])
18

19
const stats = await statsRes.json()
20
const activities = await activitiesRes.json()
21
const chartData = await chartRes.json()
22
</script>

1
function setupRenderEffect(instance, initialVNode, container) {
2
  const componentUpdateFn = () => {
3
    if (!instance.isMounted) {
4
      // 挂载
5
      const subTree = (instance.subTree = renderComponentRoot(instance))
6
      patch(null, subTree, container)
7

8
      // 关键：如果有 Suspense，延迟 mounted 钩子
9
      if (instance.suspense) {
10
        instance.suspense.effects.push(() => {
11
          invokeArrayFns(instance.m) // onMounted hooks
12
        })
13
      } else {
14
        invokeArrayFns(instance.m)
15
      }
16
    }
17
  }
18
  // ...
19
}

1
<template>
2
  <div v-if="error" class="error-boundary">
3
    <h3>😵 出错了</h3>
4
    <p>{{ error.message }}</p>
5
    <button @click="retry">重试</button>
6
    <details>
7
      <summary>错误详情</summary>
8
      <pre>{{ error.stack }}</pre>
9
    </details>
10
  </div>
11
  <slot v-else />
12
</template>
13

14
<script setup>
15
import { ref, onErrorCaptured } from 'vue'
16

17
const error = ref(null)
18

19
onErrorCaptured((err, instance, info) => {
20
  error.value = err
21
  console.error(`Error captured in ${info}:`, err)
22
  // 返回 false 阻止错误继续传播
23
  return false
24
})
25

26
function retry() {
27
  error.value = null
28
}
29
</script>

1
<template>
2
  <div class="page">
3
    <ErrorBoundary>
4
      <Suspense>
5
        <template #default>
6
          <AsyncContent />
7
        </template>
8
        <template #fallback>
9
          <SkeletonLoader />
10
        </template>
11
      </Suspense>
12
    </ErrorBoundary>
13
  </div>
14
</template>
15

16
<script setup>
17
import ErrorBoundary from './ErrorBoundary.vue'
18
import SkeletonLoader from './SkeletonLoader.vue'
19

20
const AsyncContent = defineAsyncComponent(() =>
21
  import('./AsyncContent.vue')
22
)
23
</script>

1
<template>
2
  <div v-if="hasError" class="error-boundary" :class="level">
3
    <div class="error-content">
4
      <component :is="errorIcon" />
5
      <h3>{{ errorTitle }}</h3>
6
      <p v-if="showMessage">{{ error?.message }}</p>
7

8
      <div class="error-actions">
9
        <button v-if="canRetry" @click="handleRetry" class="btn-retry">
10
          {{ retrying ? '重试中...' : '重试' }}
11
        </button>
12
        <button v-if="canReset" @click="handleReset" class="btn-reset">
13
          重置页面
14
        </button>
15
      </div>
16
    </div>
17
  </div>
18
  <slot v-else />
19
</template>
20

21
<script setup>
22
import { ref, onErrorCaptured, computed } from 'vue'
23

24
const props = defineProps({
25
  level: {
26
    type: String,
27
    default: 'page', // 'page' | 'section' | 'inline'
28
    validator: (v) => ['page', 'section', 'inline'].includes(v)
29
  },
30
  maxRetries: { type: Number, default: 3 },
31
  showMessage: { type: Boolean, default: true },
32
  fallbackComponent: { type: Object, default: null }
33
})
34

35
const emit = defineEmits(['error', 'retry', 'reset'])
36

37
const error = ref<Error | null>(null)
38
const retryCount = ref(0)
39
const retrying = ref(false)
40
const hasError = computed(() => error.value !== null)
41
const canRetry = computed(() => retryCount.value < props.maxRetries)
42
const canReset = computed(() => retryCount.value >= props.maxRetries)
43

44
const errorTitle = computed(() => {
45
  if (retryCount.value >= props.maxRetries) {
46
    return '多次重试后仍然失败'
47
  }
48
  return '加载失败'
49
})
50

51
onErrorCaptured((err, instance, info) => {
52
  error.value = err instanceof Error ? err : new Error(String(err))
53
  emit('error', { error: err, info })
54
  return false
55
})
56

57
async function handleRetry() {
58
  retrying.value = true
59
  retryCount.value++
60
  emit('retry', retryCount.value)
61

62
  // 清除错误状态，触发重新渲染
63
  error.value = null
64

65
  // 给一个微小的延迟让组件重新挂载
66
  await new Promise(r => setTimeout(r, 100))
67
  retrying.value = false
68
}
69

70
function handleReset() {
71
  retryCount.value = 0
72
  error.value = null
73
  emit('reset')
74
}
75
</script>

1
<template>
2
  <slot :isReady="allResolved" />
3
</template>
4

5
<script setup>
6
import { ref, provide, computed } from 'vue'
7

8
const pendingCount = ref(0)
9
const allResolved = computed(() => pendingCount.value === 0)
10

11
provide('suspense-group', {
12
  register() {
13
    pendingCount.value++
14
  },
15
  resolve() {
16
    pendingCount.value--
17
  }
18
})
19
</script>

1
<template>
2
  <Suspense @pending="onPending" @resolve="onResolve">
3
    <template #default>
4
      <slot />
5
    </template>
6
    <template #fallback>
7
      <slot name="fallback" />
8
    </template>
9
  </Suspense>
10
</template>
11

12
<script setup>
13
import { inject, onMounted } from 'vue'
14

15
const group = inject('suspense-group', null)
16

17
function onPending() {
18
  group?.register()
19
}
20

21
function onResolve() {
22
  group?.resolve()
23
}
24
</script>

1
<script setup>
2
import { useAsyncData } from '../composables/useAsyncData'
3

4
const props = defineProps({
5
  url: { type: String, required: true },
6
  cacheKey: { type: String, default: '' }
7
})
8

9
// 利用 Suspense，可以直接 await
10
const { data, refresh } = await useAsyncData(
11
  props.cacheKey || props.url,
12
  () => fetch(props.url).then(r => r.json())
13
)
14

15
defineExpose({ refresh })
16
</script>
17

18
<template>
19
  <slot :data="data" :refresh="refresh" />
20
</template>

1
const cache = new Map<string, { data: any; timestamp: number }>()
2
const CACHE_TTL = 5 * 60 * 1000 // 5 分钟
3

4
export async function useAsyncData<T>(
5
  key: string,
6
  fetcher: () => Promise<T>,
7
  options: { ttl?: number } = {}
8
) {
9
  const ttl = options.ttl ?? CACHE_TTL
10
  const data = ref<T | null>(null)
11

12
  // 检查缓存
13
  const cached = cache.get(key)
14
  if (cached && Date.now() - cached.timestamp < ttl) {
15
    data.value = cached.data
16
  } else {
17
    // 获取数据
18
    const result = await fetcher()
19
    data.value = result
20
    cache.set(key, { data: result, timestamp: Date.now() })
21
  }
22

23
  async function refresh() {
24
    cache.delete(key)
25
    const result = await fetcher()
26
    data.value = result
27
    cache.set(key, { data: result, timestamp: Date.now() })
28
  }
29

30
  return { data, refresh }
31
}

1
<template>
2
  <div class="app">
3
    <NavBar />
4
    <RouterView v-slot="{ Component }">
5
      <template v-if="Component">
6
        <Transition name="page" mode="out-in">
7
          <KeepAlive :max="5">
8
            <Suspense :timeout="0" @pending="startProgress" @resolve="finishProgress">
9
              <template #default>
10
                <component :is="Component" :key="route.path" />
11
              </template>
12
              <template #fallback>
13
                <RouteLoadingBar />
14
              </template>
15
            </Suspense>
16
          </KeepAlive>
17
        </Transition>
18
      </template>
19
    </RouterView>
20
  </div>
21
</template>
22

23
<script setup>
24
import { useRoute } from 'vue-router'
25
import { useProgressBar } from './composables/useProgressBar'
26

27
const route = useRoute()
28
const { start: startProgress, finish: finishProgress } = useProgressBar()
29
</script>

1
<template>
2
  <Suspense :timeout="0">
3
    <template #default>
4
      <slot />
5
    </template>
6
    <template #fallback>
7
      <slot name="skeleton">
8
        <!-- 默认骨架屏 -->
9
        <div class="skeleton-wrapper">
10
          <div class="skeleton-line skeleton-title" />
11
          <div class="skeleton-line" />
12
          <div class="skeleton-line" />
13
          <div class="skeleton-line skeleton-short" />
14
        </div>
15
      </slot>
16
    </template>
17
  </Suspense>
18
</template>
19

20
<style scoped>
21
.skeleton-wrapper {
22
  padding: 16px;
23
}
24

25
.skeleton-line {
26
  height: 16px;
27
  background: linear-gradient(
28
    90deg,
29
    #f0f0f0 25%,
30
    #e0e0e0 50%,
31
    #f0f0f0 75%
32
  );
33
  background-size: 200% 100%;
34
  animation: shimmer 1.5s infinite;
35
  border-radius: 4px;
36
  margin-bottom: 12px;
37
}
38

39
.skeleton-title {
40
  height: 24px;
41
  width: 60%;
42
  margin-bottom: 20px;
43
}
44

45
.skeleton-short {
46
  width: 40%;
47
}
48

49
@keyframes shimmer {
50
  0% { background-position: 200% 0; }
51
  100% { background-position: -200% 0; }
52
}
53
</style>

1
<template>
2
  <Suspense v-if="shouldSuspend">
3
    <template #default>
4
      <slot />
5
    </template>
6
    <template #fallback>
7
      <slot name="fallback">
8
        <DefaultLoader />
9
      </slot>
10
    </template>
11
  </Suspense>
12
  <slot v-else />
13
</template>
14

15
<script setup>
16
defineProps({
17
  shouldSuspend: {
18
    type: Boolean,
19
    default: true
20
  }
21
})
22
</script>