Suspense实现骨架屏加载

162 阅读1分钟

<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>