vue实现suspense
Vue 3 中实现 Suspense
Suspense 是 Vue 3 引入的一个内置组件，用于处理异步依赖的加载状态。它允许在等待异步组件或异步数据加载时显示后备内容（fallback），直到异步操作完成。
基本用法
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
</script>结合异步数据加载
Suspense 也可以用于处理异步数据加载的场景。需要在组件的 setup 或 <script setup> 中使用 async：
<template>
<Suspense>
<template #default>
<DataComponent />
</template>
<template #fallback>
<div>Loading data...</div>
</template>
</Suspense>
</template>
<script setup>
import { ref } from 'vue';
const DataComponent = {
async setup() {
const data = await fetchData();
return { data };
},
template: `<div>{{ data }}</div>`
};
async function fetchData() {
return new Promise(resolve => {
setTimeout(() => resolve('Loaded data'), 1000);
});
}
</script>错误处理
可以通过 onErrorCaptured 钩子捕获 Suspense 内部的错误：
<template>
<Suspense @error-captured="handleError">
<!-- ... -->
</Suspense>
</template>
<script setup>
import { onErrorCaptured } from 'vue';
function handleError(err) {
console.error('Error caught by Suspense:', err);
return false; // 阻止错误继续向上传播
}
</script>嵌套 Suspense
Suspense 可以嵌套使用，每个 Suspense 会处理自己范围内的异步依赖：
<template>
<Suspense>
<template #default>
<ParentComponent />
</template>
<template #fallback>
<div>Loading parent...</div>
</template>
</Suspense>
</template>
<script setup>
const ParentComponent = {
components: {
ChildComponent: defineAsyncComponent(() =>
import('./ChildComponent.vue')
)
},
template: `
<div>
<Suspense>
<template #default>
<ChildComponent />
</template>
<template #fallback>
<div>Loading child...</div>
</template>
</Suspense>
</div>
`
};
</script>注意事项
- Suspense 是实验性功能，在 Vue 3 中稳定，但 API 可能在未来版本中调整
- 只能在有异步依赖的组件上使用 Suspense
- 在 SSR 中使用时需要特别注意水合过程
- 对于简单的加载状态，可以考虑使用 v-if 配合加载状态变量
这些方法展示了在 Vue 3 中使用 Suspense 处理异步组件和数据加载的不同方式，可以根据具体需求选择适合的实现方案。
