Suspense 是 Vue 3 中引入的一个新特性，用于处理异步组件的加载状态。它允许你在异步组件加载时显示一个后备内容（fallback content），直到异步组件加载完成。Suspense 特别适用于处理异步数据获取、代码分割等场景。
为什么需要 Suspense？
在 Vue 2 中，处理异步组件的加载状态通常需要手动管理加载状态和错误处理。这种方式虽然可行，但在复杂的应用中可能会导致代码冗余和难以维护。
Suspense 提供了一种声明式的方式来处理异步组件的加载状态，使得代码更加简洁和易于理解。
如何使用 Suspense？
Suspense 的使用非常简单，你只需要在模板中使用 <suspense> 标签，并定义两个插槽：
#default：用于放置异步组件。#fallback：用于放置加载中的后备内容。
基本用法
<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>
在这个例子中，AsyncComponent 是一个异步组件，当它加载时，Suspense 会显示 #fallback 插槽中的内容（即“Loading...”），直到 AsyncComponent 加载完成。
结合异步数据获取
Suspense 不仅可以用于异步组件，还可以结合异步数据获取来使用。你可以在 setup 函数中使用 async 来获取数据，并在组件中使用这些数据。
<template>
<Suspense>
<template #default>
<UserProfile :user="user" />
</template>
<template #fallback>
<div>Loading user profile...</div>
</template>
</Suspense>
</template>
<script>
import { ref } from 'vue';
import UserProfile from './UserProfile.vue';
export default {
components: {
UserProfile,
},
async setup() {
const user = ref(null);
// 模拟异步数据获取
const fetchUser = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve({ name: 'Alice', age: 25 });
}, 2000);
});
};
user.value = await fetchUser();
return {
user,
};
},
};
</script>
在这个例子中，setup 函数是异步的，它会等待 fetchUser 函数完成数据获取。在数据获取完成之前，Suspense 会显示 #fallback 插槽中的内容（即“Loading user profile...”）。
错误处理
Suspense 还支持错误处理。你可以使用 onErrorCaptured 钩子来捕获异步组件或异步数据获取中的错误。
<template>
<Suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
</template>
<script>
import { defineAsyncComponent, onErrorCaptured } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./AsyncComponent.vue')
);
export default {
components: {
AsyncComponent,
},
setup() {
onErrorCaptured((err, vm, info) => {
console.error('Error captured:', err);
return false; // 阻止错误继续向上传播
});
},
};
</script>
在这个例子中，如果 AsyncComponent 加载过程中发生错误，onErrorCaptured 钩子会捕获错误并打印到控制台。
总结
Suspense 是 Vue 3 中一个非常有用的特性，它提供了一种声明式的方式来处理异步组件的加载状态。通过 Suspense，你可以：
- 在异步组件加载时显示后备内容。
- 结合异步数据获取来管理加载状态。
- 捕获和处理异步操作中的错误。
Suspense 使得处理异步操作变得更加简洁和易于维护，特别适用于复杂的应用场景。
