Vue3 异步组件 <suspense>

[jtwang7]

Vue3 异步组件

参考文章：Suspense

✅ 什么是异步组件？

• 组件内部存在异步逻辑(例如接口请求等)
• 组件是被懒加载的

满足上述条件的组件，我们可将其视为异步组件，Vue 中异步组件通常同 <suspense> 一同使用：
异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <suspense>，它将被视为该 <suspense> 的异步依赖，加载状态由 <suspense> 控制。

❇️ 注意：是在父链组件(父组件及以上)上用 <suspense> 包裹异步组件，而不是包裹在异步组件自身的模板内。

✅ <suspense> 特性

• <suspense> 组件有两个插槽
  • default：<template #default></template>
  • fallback：<template #fallback></template>

它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise。通常这是通过 async 实现的，而不是显式地返回一个 Promise。

• 异步组件不需要作为 <suspense> 的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和 <suspense> 自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。