Vue3之Suspense

简介

目前这是一个实验性的组件，官方并不推荐在正式环境中使用 点击

• 写到这里，感觉vue和react越来越像了，点击
• 他用于加载异步组件的时候，当异步组件还未加载出来的时候优先显示一些内容，如骨架屏等
• 只是我们在使用的时候需要使用vue的插槽语法 点击

例子

异步组件

<script setup>
const asyncFunc = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("hello world")
        }, 2000)
    })
}

const param = await asyncFunc()
</script>

<template>
    <h2>{{ param }}</h2>
</template>
           

使用Suspense

<script setup>
import { defineAsyncComponent } from "vue"
// 引入异步组件
const AsyncComponent = defineAsyncComponent(() => import("./AsyncComponent.vue"))
</script>

<template>
    <h2>Suspense</h2>
    <Suspense>
        <template v-slot:default>
            <!-- 放异步组件 -->
            <AsyncComponent />
        </template>
        <template v-slot:fallback>
            <!-- 当异步组件还没有加载出来需要显示的内容 -->
            <div>Loading...</div>
        </template>
    </Suspense>
</template>
           

当我们刷新加载异步组件的时候就会发现，在没有加载出异步组件的时候，会先显示

loading

，这样会有一个比较好的用户体验