当前位置：首页 > VUE

vue实现suspense

2026-02-10 03:44:25VUE

Vue Suspense 的基本概念

Suspense 是 Vue 3 中用于处理异步依赖的组件，允许在异步组件或异步数据加载时显示占位内容（如加载状态），直到异步操作完成。

实现 Suspense 的步骤

1. 定义异步组件
通过 defineAsyncComponent 创建一个异步组件，模拟异步加载过程：

vue实现suspense

import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(import('./MyComponent.vue')); // 替换为实际组件路径
    }, 2000); // 模拟延迟
  });
});

2. 使用 Suspense 包裹异步组件
在模板中，用 <Suspense> 包裹异步组件，并通过 #default 和 #fallback 插槽分别定义成功和加载状态：

vue实现suspense

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

3. 结合异步数据加载
Suspense 也可以配合 async setup 使用。在子组件中通过 await 处理异步数据：

// MyComponent.vue
export default {
  async setup() {
    const data = await fetchData(); // 假设的异步函数
    return { data };
  }
};

错误处理

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

import { onErrorCaptured } from 'vue';

export default {
  setup() {
    onErrorCaptured((err) => {
      console.error('Async component error:', err);
      return false; // 阻止错误继续向上传播
    });
  }
};