Open jtwang7 opened 2 years ago
参考文章：Suspense
✅ 什么是异步组件？
满足上述条件的组件，我们可将其视为异步组件，Vue 中异步组件通常同 <suspense> 一同使用： 异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <suspense>，它将被视为该 <suspense> 的异步依赖，加载状态由 <suspense> 控制。
<suspense>
❇️ 注意：是在父链组件(父组件及以上)上用 <suspense> 包裹异步组件，而不是包裹在异步组件自身的模板内。
✅ <suspense> 特性
<template #default></template>
<template #fallback></template>
它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise。通常这是通过 async 实现的，而不是显式地返回一个 Promise。
Vue3 异步组件
参考文章：Suspense
✅ 什么是异步组件？
满足上述条件的组件，我们可将其视为异步组件，Vue 中异步组件通常同
<suspense>一同使用： 异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个<suspense>，它将被视为该<suspense>的异步依赖，加载状态由<suspense>控制。✅
<suspense>特性<suspense>组件有两个插槽<template #default></template><template #fallback></template>它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。另一个触发 fallback 的方式是让后代组件从 setup 函数中返回一个 Promise。通常这是通过 async 实现的，而不是显式地返回一个 Promise。
<suspense>的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和<suspense>自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。