<Suspense>
接受两个插槽:#default
和 #fallback
。它将在内存中渲染默认插槽的同时展示后备插槽内容。
如果在渲染时遇到异步依赖项 (异步组件和具有 async setup()
的组件),它将等到所有异步依赖项解析完成时再显示默认插槽。
用法:
// bgComponent
import {ref, onMounted} from 'vue'
const bgUrl = ref('')
onMounted(async () => {
bgUrl.value = await getBgUrl()
})
使用Suspense
导入组件
import bgComponent from '...'
<Suspense>
// 这个组件进行渲染时,遇到异步的时候会先渲染出挂起状态中的元素
<bgComponent />
<template #fallback> // 挂起状态渲染
<Skeleton />
<template />
</Suspense>