Suspense是Vue3推出的一个内置组件，它允许我们的程序在等待异步组件时渲染一些后备的内容，可以让我们创建一个平滑的用户体验；Vue中加载异步组件其实在Vue2.x中已经有了，我们用的vue-router中加载的路由组件其实也是一个异步组件：
export default {name: "Home",components: {AsyncButton: () => import("../components/AsyncButton"),},
}
在Vue3中重新定义，异步组件需要通过defineAsyncComponent来进行显示的定义：
// 全局定义异步组件
//src/main.js
import { defineAsyncComponent } from "vue";
const AsyncButton = defineAsyncComponent(() =>import("./components/AsyncButton.vue")
);
app.component("AsyncButton", AsyncButton);// 组件内定义异步组件
// src/views/Home.vue
import { defineAsyncComponent } from "vue";
export default {components: {AsyncButton: defineAsyncComponent(() =>import("../components/AsyncButton")),},
};
同时对异步组件的可以进行更精细的管理：
export default {components: {AsyncButton: defineAsyncComponent({delay: 100,timeout: 3000,loader: () => import("../components/AsyncButton"),errorComponent: ErrorComponent,onError(error, retry, fail, attempts) {if (attempts <= 3) {retry();} else {fail();}},}),},
};
这样我们对异步组件加载情况就能掌控，在加载失败也能重新加载或者展示异常的状态：
[表情]异步组件加载失败
我们回到Suspense，上面说到它主要是在组件加载时渲染一些后备的内容，它提供了两个slot插槽，一个default默认，一个fallback加载中的状态：
<template><div><button @click="showButton">展示异步组件</button><template v-if="isShowButton"><Suspense><template #default><AsyncButton></AsyncButton></template><template #fallback><div>组件加载中...</div></template></Suspense></template></div>
</template>
<script>
export default {setup() {const isShowButton = ref(false);function showButton() {isShowButton.value = true;}return {isShowButton,showButton,};},
}
</script>
异步组件加载显示占位
非兼容的功能
非兼容的功能主要是一些和Vue2.x版本改动较大的语法，已经在Vue3上可能存在兼容问题了。
