在等待异步组件时，suspense会渲染一些额外的内容，让用户有更好的体验。
官网提到他属于实验性功能：
<Suspense> 这是一个实验性功能。在稳定之前，它可能不会最终成为稳定功能 API 也可能发生变化。
<Suspense> 它是一个内置组件，用于协调组件树中异步依赖的处理。它允许我们在组件树上层等待多个嵌套异步依赖项分析，并在等待时渲染加载状态。
这意味着该组件用于在等待异步组件时渲染一些额外的内容，使应用程序有更好的用户体验
要了解 <Suspense> 我们需要想象解决的问题以及它是如何与异步依赖相互作用的。
<Suspense> └─ <Dashboard> ├─ <Profile> │ └─ <FriendStatus>(组件有异步 setup()） └─ <Content> ├─ <ActivityFeed> (异步组件) └─ <Stats>(异步组件)
为了渲染它们，必须首先分析一些异步资源。如果没有， <Suspense>，每个人都需要处理自己的加载、错误报告和完成状态。在最坏的情况下，我们可能会在页面上看到三个旋转的加载状态，并在不同的时间显示内容。
有了 <Suspense> 组件完成后，我们可以在等待整个多层次组件树中各种异步依赖获取结果时，在顶层显示加载或加载失败的状态。
接下来，让我们举一个简单的例子：
首先需要引入异步组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
一些简单的是用组件异步加载的效果
Home父组件代码如下：
<template>
<div class="home">
<h3>我是Home组件</h3>
<Suspense>
<template #default>
<Child />
</template>
<template v-slot:fallback>
<h3>Loading...</h3>
</template>
</Suspense>
</div>
</template>
<script >
// import Child from './components/Child///静态引入
import { defineAsyncComponent } from "vue";
const Child = defineAsyncComponent(() => import("../components/Child"));
export default {
name: "",
components: { Child },
};
</script>
<style>
.home {
width: 300px;
background-color: gray;
padding: 10px;
}
</style>
Child自组件
<template>
<div class="child">
<h3>我是Child组件</h3>
name: {{user.name}}
age: {{user.age}}
</div>
</template>
<script>
import { ref } from "vue";
export default {
name: "Child",
async setup() {
const NanUser = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
name: "NanChen",
age: 20,
});
},2000);
});
};
const user = await NanUser();
return {
user,
};
},
};
</script>
<style>
.child {
background-color: skyblue;
padding: 10px;
}
</style>
组件根据插槽机制进行区分， #default 插槽中的内容是您需要渲染的异步组件； #fallback 在您指定的加载过程中，静态组件。
评论0