Suspense组件是什么:用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态。
即suspense是用于渲染异步组件的,等待时显示Loading....
使用步骤:
一.defineAsyncComponent组合式API,用于定义异步组件
import {defineAsyncComponent} from 'vue'
const per = defineAsyncComponent(()=>import('./components/per.vue'))
二. 插槽包裹异步组件,#default用于放置页面真正要显示的内容,#fallback用于在组件还没加载出来该模块时,显示其他内容。
<suspense>
<!-- default插槽v-slot里面放置异步组件 -->
<template #default>
<Per/> <!--需要加载的组件 -->
</template>
<!-- fallback插槽里面放置组件没有加载完成时显示的内容 -->
<template #fallback>
Loading...
</template>
</suspense>
三.如果组件的setup返回的是一个promise对象,那么必须使用异步方式导入,否则该异步组件无法显示。
setup() {
let name = ref("小王");
let age = ref(25);
//setup方法的返回值,可以是一个Promise对象
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve({
name,
age
})
}, 2000);
})
}