Vue3中Suspense的使用

前言

当我们在项目中遇到异步组件加载的时的loading状态的时候，一般情况下用v-if搭配loading变量，例如

vue 复制代码

<template>
    <h2>我是Child组件</h2>
    <div v-if="loading">加载中。。。</div>
    <div v-else>{{ data }}</div>
</template>
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
const data = ref(null)
const loading = ref(true)
onMounted(async () => {
    try {
        const res = await axios.get('https://v2.xxapi.cn/api/yiyan?type=hitokoto');
        // 假设返回的数据结构是 { data: "一句诗" } 或其他
        data.value = res.data.data;
        console.log(data.value);
    } catch (error) {
        console.error('请求失败：', error);
        data.value = '加载失败，请稍后重试';
    } finally {
        loading.value = false;  // 无论成功或失败，都结束加载状态
    }
})
</script>

<style scoped></style>

没有感觉这样写很复杂吗？这样是不是我们每个组件都得这么写呢？如果父组件依赖子组件得异步数据，父组件是不是一直要等待子组件加载完毕才能渲染呢？像我们上面写的，是不是完全由子组件控制得，父组件完全没有感知呢？

Suspense就是解决这种问题的，它允许我们在组件树的任意层级等待异步依赖，并且在等待期间现实统一的fallback内容，直到所有的依赖全部完成，所以上面的我们就可以这么写

vue 复制代码

//父组件
<template>
  <h2>我是APP组件</h2>
  <Suspense>
    <template v-slot:default>
      <Child />
    </template>
    <template v-slot:fallback>
      <h2>正在加载中......</h2>
    </template>
  </Suspense>

</template>
<script setup>
import { teleportProps } from 'element-plus/es/components/teleport/index.mjs';
import Child from './Child.vue';


</script>

<style scoped></style>

//子组件
<template>
    <h2>我是Child组件</h2>
    <div>{{ data }}</div>
</template>
<script setup>
import axios from 'axios';
import { ref, onMounted } from 'vue';
const data = ref(null)
const loading = ref(true)

const res = await axios.get('https://v2.xxapi.cn/api/yiyan?type=hitokoto');
data.value = res.data.data;

</script>

<style scoped></style>

Suspense是使用插槽来实现的，其中default是你实际要渲染的东西，其中可能包括异步依赖等等；fallback是异步加载之前需要现实的内容

注：如果你在 default 插槽中写了多个根节点（如多个组件并列），Vue 会警告并要求你用一个包裹元素。所以通常用一个 <div> 包裹。