vue实现suspense
Vue Suspense 的基本概念
Suspense 是 Vue 3 中用于处理异步依赖的组件，允许在异步组件或异步数据加载时显示占位内容（如加载状态），直到异步操作完成。
实现 Suspense 的步骤
1. 定义异步组件
通过 defineAsyncComponent 创建一个异步组件，模拟异步加载过程：
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(import('./MyComponent.vue')); // 替换为实际组件路径
}, 2000); // 模拟延迟
});
});2. 使用 Suspense 包裹异步组件
在模板中，用 <Suspense> 包裹异步组件，并通过 #default 和 #fallback 插槽分别定义成功和加载状态：
<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; // 阻止错误继续向上传播
});
}
};注意事项
- Suspense 是实验性功能，需确保 Vue 版本 ≥ 3.2。
- 嵌套 Suspense 时，外层会等待所有内层异步操作完成。
- 适用于路由懒加载、代码分割等场景。
通过以上方法，可以灵活实现加载状态管理和异步依赖处理。
