vue3.0的Suspense内置组件
在这篇文章中，我们将学到很多关于 Suspense 的知识--它是什么，能干什么，以及如何使用它。Suspense的主要作用：等待异步组件时渲染一些额外内容，让应用有更好的用户体验。
在开始介绍vue的Suspense组件之前，我们有必要先了解一下react的Suspense组件，因为他们的功能类似。
React
React 16.6 新增了 <Suspense> 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示：
const ProfilePage = React.lazy(() => import('./ProfilePage')); // 懒加载
// 在 ProfilePage 组件处于加载阶段时显示一个 spinner
<Suspense fallback={<Spinner />}>
<ProfilePage />
</Suspense>Suspense 组件常常和 React.lazy 配合使用。
React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。
React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。
然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<Suspense fallback={<div>Loading...</div>}>
<OtherComponent />
</Suspense>
</div>
);
}注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。
Vue
defineAsyncComponent 类似于 React.lazy 函数。
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./components/AsyncComponent.vue'))
app.component('async-component', AsyncComp)Vue 中也有 Suspense 组件，和 React 中的类似。
const OtherComponent = defineAsyncComponent(() => import('./OtherComponent'));
<template>
<Suspense>
<template #default>
<OtherComponent />
</template>
<template #fallback>
Loading ...
</template>
</Suspense>
</template>具名插槽的缩写是在 vue2.6.0 新增，跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header
总结
Suspense能很好解决异步请求的困境。
Suspense是Vue3推出的一个内置的特殊组件，有两个template slot，刚开始会渲染一个fallback内容，直到达到某个条件以后才会渲染正式的内容。
如果使用Suspense，在setup( )中需要返回一个promise，而不是直接返回一个对象。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
