开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言

今天我们来介绍Vue的一个实验性功能--<Suspense>，目前来说虽然不是很稳定，相应的API在稳定之前可能也会进行更改，但并不影响我们对他所实现的功能进行了解。

在我们把整个业务拆分成很多个组件的时候，在组件的内部必不可少的会进行相应的请求，而为了更好的优化视觉效果，往往会在请求的期间渲染一个加载状态。

而当嵌套的组件不止一个的时候，就要维护多个组件的加载状态，这样我们可能会看到多个加载中的效果，这显然并不是我们想要看到的。

所以，为了统一的对这些加载状态进行管理，Vue为我们提供了 一个<Suspense>的内置组件，可以让我们等待多个组件请求获取到结果时，进行一个加载中的处理。

下面我们来具体的看一看吧。

<Suspense>

<Suspense>： vue提供的一个内置组件，可以很好的让我们在等待其内部组件加载解析的过程中进行一个加载状态的处理。

<Suspense>可以对两种异步依赖进行处理：

• 一种时带有 setup() 钩子的组件。当然也包含 <script setup> 中顶层有 await 表达式的组件。

像下面这样：

<script setup>
const res = await fetch(...)
const data = await res.json()
</script>

<template>
  {{ data }}
</template>

• 一种就是异步组件。

加载状态

而我们如何编写加载中的状态呢？

<Suspense>组件有两个插槽：#default 和 #fallback。当等待异步依赖的时候就会渲染 #fallback插槽中的内容，反之就会渲染默认插槽中的内容。

<Suspense>
  <!-- 具有异步依赖的组件，默认插槽可省略 -->
  <Dashboard />

  <!-- 等待异步依赖加载时会显示在 #fallback 插槽中的内容 -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

这样，当组件进行初次渲染时，如果当遇到异步依赖时，就会进入挂起状态，也就是会展示 #fallback 插槽中的内容。当所有异步依赖完成后，就会进入完成状态，并展示默认插槽中的内容。

注意：当进入完成状态时，只有当默认插槽的内容被替换时，<Suspense> 才会回到挂起状态。