Suspense

引入

Suspense，本意是“悬而未决”的意思，这是 Vue3 新增的一个内置组件，主要用来在组件树中协调对异步依赖的处理。

假设有如下目录结构：

<Suspense>
└─ <Dashboard>
   ├─ <Profile>（内容一）
   │  └─ <FriendStatus>（好友状态组件：有异步的setup方法）
   └─ <Content>（内容二）
      ├─ <ActivityFeed> （活动提要：异步组件）
      └─ <Stats>（统计组件：异步组件）

在这个组件树中有多个嵌套组件，要渲染出它们，首先得解析一些异步资源。

每个异步组件需要处理自己的加载、报错和完成状态。在最坏的情况下，可能会在页面上看到三个旋转的加载状态，然后在不同的时间显示出内容。

有了 <Suspense> 组件后，我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时，在顶层统一处理加载状态。

<Suspense> 可以等待的异步依赖有两种：

带有异步 setup( ) 钩子的组件。这也包含了使用 <script setup> 时有顶层 await 表达式的组件

export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}

vue

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

<template>
  {{ posts }}
</template>

使用defineAsyncComponent()定义的异步组件

在 <Suspense> 组件中有两个插槽，两个插槽都只允许一个直接子节点。

#default：当所有的异步依赖都完成后，会进入完成状态，展示默认插槽内容。
#fallback：如果有任何异步依赖未完成，则进入挂起状态，在挂起状态期间，展示的是后备内容。

快速上手

App.vue
└─ Dashboard.vue
   ├─ Profile.vue
   │  └─ FriendStatus.vue（组件有异步的 setup）
   └─ Content.vue
      ├─ AsyncActivityFeed（异步组件）
      │  └─ ActivityFeed.vue
      └─ AsyncStats（异步组件）
         └─ Stats.vue

实现效果：使用 Suspense 统一显示状态，异步都加载完毕再显示组件，否则只显示loding。

vue

<template>
  <div class="dashboard">
    <h1>控制台</h1>
     <!-- 使用suspence组件 -->
    <Suspense>
      <template #default>
        <!-- 所有异步组件加载完成后显示的内容 -->
        <div>
          <!-- 内容一：下面是好友状态组件（2s）-->
          <Profile />
          <!-- 内容二：活动提要（8s）、统计组件（5s） -->
          <Content />
        </div>
      </template>
      <template #fallback>
        <!-- 只要有任何一个异步状态没有完成，显示后备内容 -->
        <LoadingComponent />
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import Profile from './Profile.vue'
import Content from './Content.vue'
import LoadingComponent from './LoadingComponent.vue'
</script>

<style scoped>
.dashboard {
  padding: 20px;
}
</style>

🤔 思考：假设想要让 Profile 组件内容先显示出来，不等待 Content 组件的异步完成状态，该怎么做？

只需要再给content组件里的异步组件再包一个<Suspence/>即可。

vue

<!-- Content组件 -->
<template>
  <div class="content">
    <h2>第二部分内容</h2>
    <Suspense>
      <template #default>
        <div>
          <AsyncActivityFeed />
          <AsyncStats />
        </div>
      </template>
      <template #fallback>
        <LoadingComponent />
      </template>
    </Suspense>
  </div>
</template>

其他细节

1. 内置组件嵌套顺序

<Suspense> 经常会和 <Transition>、<KeepAlive> 搭配着一起使用，此时就涉及到一个嵌套的顺序问题，谁在外层，谁在内层。

下面是一个模板：

vue

<RouterView v-slot="{ Component }">
  <template v-if="Component">
    <Transition mode="out-in">
      <KeepAlive>
        <Suspense>
          <!-- 主要内容 -->
          <component :is="Component"></component>

          <!-- 加载中状态 -->
          <template #fallback>
            正在加载...
          </template>
        </Suspense>
      </KeepAlive>
    </Transition>
  </template>
</RouterView>

你可以根据实际开发需求，删减你不需要的组件。

2. 事件

<Suspense> 组件会触发三个事件：

pending：在进入挂起状态时触发
resolve：在 default 插槽完成获取新内容时触发
fallback：显示后备内容的时候触发

vue

<template>
  <div id="app">
    <h1>Suspense Event Example</h1>
    <button @click="showComponent = true">加载异步组件</button>
    <!-- 会在适当的时机触发事件 -->
    <Suspense v-if="showComponent" 
              @pending="onPending" 
              @resolve="onResolve" 
              @fallback="onFallback">
      <template #default>
        <AsyncCom />
      </template>
      <template #fallback>
        <LoadingComponent />
      </template>
    </Suspense>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'
import LoadingComponent from './components/LoadingComponent.vue'

const showComponent = ref(false)

// 异步组件
const AsyncCom = defineAsyncComponent(() => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(import('./components/AsyncComponent.vue'))
    }, 5000)
  })
})

const onPending = () => {
  console.log('当前处于pending状态')
}

const onResolve = () => {
  console.log('异步组件加载完毕！！！')
}

const onFallback = () => {
  console.log('当前处于fallback状态，显示后备内容')
}
</script>

-EOF-

Suspense ​

引入 ​

快速上手 ​

其他细节 ​

1. 内置组件嵌套顺序 ​

2. 事件 ​

Suspense

引入

快速上手

其他细节

1. 内置组件嵌套顺序

2. 事件