当前位置：首页 > VUE

vue实现suspense

2026-03-07 03:34:16VUE

使用 Vue 3 实现 Suspense

Vue 3 引入了 <Suspense> 组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示后备内容。

基本用法

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

<script>
import { defineAsyncComponent } from 'vue'

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

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

处理异步 setup

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

<template>
  <Suspense>
    <template #default>
      <AsyncSetupComponent />
    </template>
    <template #fallback>
      <div>Loading data...</div>
    </template>
  </Suspense>
</template>

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

嵌套 Suspense

可以嵌套多个 Suspense 组件来处理不同层级的异步加载：

<Suspense>
  <template #default>
    <ComponentA />
  </template>
  <template #fallback>
    <div>Loading Component A...</div>
  </template>
</Suspense>

<ComponentA>
  <Suspense>
    <template #default>
      <ComponentB />
    </template>
    <template #fallback>
      <div>Loading Component B...</div>
    </template>
  </Suspense>
</ComponentA>

错误处理

结合 onErrorCaptured 可以处理异步加载中的错误：

<template>
  <Suspense @error-captured="handleError">
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div v-if="!error">Loading...</div>
      <div v-else>Error: {{ error.message }}</div>
    </template>
  </Suspense>
</template>

<script>
export default {
  data() {
    return {
      error: null
    }
  },
  methods: {
    handleError(err) {
      this.error = err
      return false // 阻止错误继续向上传播
    }
  }
}
</script>

与路由结合使用

在 Vue Router 中使用 Suspense 处理路由组件加载：

<template>
  <RouterView v-slot="{ Component }">
    <Suspense>
      <component :is="Component" />
      <template #fallback>
        <div>Loading route...</div>
      </template>
    </Suspense>
  </RouterView>
</template>

性能优化技巧

对于需要预加载的组件，可以使用 defineAsyncComponent 的 loadingComponent 和 delay 选项：

const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  delay: 200, // 延迟显示加载状态
  timeout: 3000 // 超时时间
})