当前位置：首页 > VUE

vue实现suspense

2026-01-12 20:29:12VUE

Vue 3 中实现 Suspense

Suspense 是 Vue 3 新增的一个内置组件，用于处理异步依赖的加载状态。它可以包裹多个异步组件，并在它们解析完成前显示一个后备内容。

基本用法

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

export default {
  components: {
    AsyncComponent
  }
}
</script>

与异步 setup 结合使用

当组件使用异步 setup 时，Suspense 可以自动捕获其加载状态：

vue实现suspense

<template>
  <Suspense>
    <template #default>
      <ComponentWithAsyncSetup />
    </template>
    <template #fallback>
      <div>Loading setup...</div>
    </template>
  </Suspense>
</template>

<script>
const ComponentWithAsyncSetup = {
  async setup() {
    const data = await fetchData()
    return { data }
  }
}
</script>

错误处理

可以通过 onErrorCaptured 钩子捕获 Suspense 内部的错误：

<script>
export default {
  setup() {
    const error = ref(null)

    onErrorCaptured((err) => {
      error.value = err
      return true // 阻止错误继续向上传播
    })

    return { error }
  }
}
</script>

嵌套 Suspense

Suspense 组件可以嵌套使用，每个 Suspense 会处理自己范围内的异步依赖：

vue实现suspense

<Suspense>
  <template #default>
    <ParentComponent />
  </template>
  <template #fallback>
    Loading parent...
  </template>
</Suspense>

<!-- ParentComponent.vue -->
<template>
  <Suspense>
    <template #default>
      <ChildComponent />
    </template>
    <template #fallback>
      Loading child...
    </template>
  </Suspense>
</template>

服务器端渲染(SSR)注意事项

在 SSR 环境下，Suspense 的行为略有不同：

服务器会立即渲染 fallback 内容
客户端会等待异步组件解析后再进行水合
需要确保服务器和客户端的结果匹配

性能优化技巧

对于多个异步组件，可以使用 Promise.all 来并行加载：

const AsyncComponentA = defineAsyncComponent(() => 
  import('./A.vue')
)
const AsyncComponentB = defineAsyncComponent(() => 
  import('./B.vue')
)

// 在父组件中并行加载
Promise.all([
  AsyncComponentA.load(),
  AsyncComponentB.load()
])