Vue 3源码深度解析之：`Suspense`组件：如何管理异步依赖与回退内容。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，大家好！今天咱来聊聊Vue 3里一个既神秘又实用的家伙——Suspense组件。这玩意儿，说白了，就是Vue 3用来优雅地处理异步依赖和回退内容的。想象一下，你的页面要从服务器拉取数据，在数据回来之前，你不想让用户看到一片空白，而是想展示一个友好的加载动画或者提示信息。Suspense就是干这个的！

一、什么是Suspense？你真的懂吗？

Suspense是一个内置组件，它有两个插槽：default 和 fallback。

default 插槽: 这里面放的是你想要异步加载的组件。如果这个组件或者它依赖的组件里面有异步操作（比如async setup()，或者使用了defineAsyncComponent），那么Vue就会先渲染fallback插槽的内容。
fallback 插槽: 这里面放的是回退内容，也就是在异步依赖加载完成之前要显示的东西。可以是loading 动画，也可以是一段友好的提示文字。

简单来说，Suspense就像一个“等待室”，在你的异步数据准备好之前，先让用户在等待室里呆着，等数据回来了，再把他们“请”到主会场。

二、 Suspense的基本用法

先来看个最简单的例子：

<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: '<div>Async Component Loaded!</div>'
      })
    }, 2000) // 模拟2秒延迟
  })
})
</script>

在这个例子中，AsyncComponent是一个异步组件，它会在2秒后才加载完成。在这2秒内，用户会看到 Loading...。等AsyncComponent加载完成，Loading... 就会被替换成 Async Component Loaded!。

三、 Suspense的进阶用法：处理多个异步依赖

Suspense可以处理多个异步依赖，只要它们都在default插槽里面。

<template>
  <Suspense>
    <template #default>
      <ComponentA />
      <ComponentB />
    </template>
    <template #fallback>
      <div>Loading both components...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const ComponentA = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: '<div>Component A Loaded!</div>'
      })
    }, 1000)
  })
})

const ComponentB = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: '<div>Component B Loaded!</div>'
      })
    }, 1500)
  })
})
</script>

在这个例子中，ComponentA和ComponentB都是异步组件。只有当这两个组件都加载完成，Loading both components... 才会消失。

四、 Suspense的事件：resolve 和 pending

Suspense组件提供了两个事件：resolve 和 pending。

resolve 事件: 当default插槽里面的所有异步依赖都加载完成时，会触发这个事件。
pending 事件: 当default插槽里面的异步依赖开始加载时，会触发这个事件。

这两个事件可以用来做一些更精细的控制，比如在异步依赖加载完成后执行一些操作，或者在异步依赖开始加载时显示一个全局的加载指示器。

<template>
  <Suspense @resolve="onResolve" @pending="onPending">
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
  <div v-if="isLoading">Global Loading Indicator...</div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue'

const AsyncComponent = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        template: '<div>Async Component Loaded!</div>'
      })
    }, 2000)
  })
})

const isLoading = ref(false)

const onResolve = () => {
  console.log('Async component resolved!')
  isLoading.value = false
}

const onPending = () => {
  console.log('Async component pending...')
  isLoading.value = true
}
</script>

在这个例子中，当AsyncComponent开始加载时，isLoading会被设置为true，显示全局加载指示器。当AsyncComponent加载完成时，isLoading会被设置为false，隐藏全局加载指示器。

五、 Suspense与keep-alive的爱恨情仇

Suspense可以和keep-alive组件一起使用，来实现更复杂的缓存策略。但是，它们的配合需要注意一些细节。

keep-alive 包裹 Suspense: 这种情况下，keep-alive会缓存整个Suspense组件，包括fallback插槽的内容。这意味着，如果你的fallback插槽里面有状态，那么这些状态也会被缓存。
Suspense 包裹 keep-alive: 这种情况下，keep-alive只会缓存default插槽里面的组件。 fallback插槽的内容不会被缓存。

<!-- keep-alive 包裹 Suspense -->
<keep-alive>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>Loading... (with Keep Alive)</div>
    </template>
  </Suspense>
</keep-alive>

<!-- Suspense 包裹 keep-alive -->
<Suspense>
  <template #default>
    <keep-alive>
      <AsyncComponent />
    </keep-alive>
  </template>
  <template #fallback>
    <div>Loading... (without Keep Alive)</div>
  </template>
</Suspense>

选择哪种方式，取决于你的具体需求。如果你的fallback插槽里面有状态，并且你希望这些状态也被缓存，那么就用第一种方式。否则，就用第二种方式。

六、 Suspense的局限性

Suspense虽然强大，但也有一些局限性。

只能处理异步组件: Suspense只能处理异步组件，不能处理同步组件。如果你的组件里面没有异步操作，那么Suspense就没有任何作用。
只能处理单个根节点: default插槽里面的组件必须是单个根节点。如果你的组件有多个根节点，那么你需要用一个div或者template标签把它们包裹起来。
服务端渲染的限制: 在服务端渲染(SSR)中，Suspense的行为可能会有所不同，需要特别注意。尤其是在数据预取方面，你需要确保数据在客户端能够正确恢复。

七、 Suspense源码分析 (简略版)

Suspense的源码比较复杂，这里只做一个简单的分析，让大家对它的内部机制有一个大致的了解。

Suspense组件的核心逻辑主要集中在SuspenseImpl.ts文件中。它主要做了以下几件事情：

创建Suspense边界: Suspense组件会创建一个SuspenseBoundary对象，用来记录当前Suspense组件的状态。
渲染fallback插槽: 在异步依赖加载完成之前，Suspense组件会渲染fallback插槽的内容。
切换到default插槽: 当异步依赖加载完成时，Suspense组件会切换到default插槽，并卸载fallback插槽的内容。
处理事件: Suspense组件会触发resolve和pending事件，通知外部组件异步依赖的状态。

源码中涉及到一些关键的函数和变量，比如：

名称	作用
`SuspenseBoundary`	表示Suspense边界的对象，存储Suspense组件的状态。
`queueEffect`	将副作用函数放入队列，在合适的时机执行。
`renderSuspended`	渲染被挂起的组件（即异步组件）。
`resolveSuspense`	当异步依赖解析完成后，更新Suspense边界状态，触发重新渲染。
`triggerEvent`	触发Suspense组件的事件，例如`resolve`和`pending`。

如果你想深入了解Suspense的源码，可以去Vue 3的GitHub仓库查看packages/runtime-core/src/components/Suspense.ts文件。

八、最佳实践

使用有意义的fallback内容: 不要只是简单地显示Loading...，而是要提供一些有意义的信息，比如正在加载的资源名称，或者一个友好的提示信息。
优化异步组件的加载速度: 尽量减少异步组件的大小，使用CDN加速，或者使用服务端渲染来提高加载速度。
合理使用keep-alive: 根据你的具体需求，选择合适的keep-alive策略，避免不必要的缓存。
处理错误: 在异步组件加载失败时，要显示一个友好的错误提示，而不是让用户看到一片空白。

九、总结

Suspense是Vue 3中一个非常强大的组件，它可以让你优雅地处理异步依赖和回退内容。掌握Suspense的用法，可以让你写出更加流畅、用户体验更好的Vue应用。好了，今天的分享就到这里，希望对大家有所帮助！

各位观众老爷，打赏就不必了，点个赞就是对我最大的鼓励！咱们下期再见！

发表回复 取消回复

发表回复取消回复