经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3异步组件Suspense的使用方法详解
来源:jb51  时间:2023/1/28 8:43:01  对本文有异议

Suspense组件

官网中有提到他是属于实验性功能:
<Suspense> 是一项实验性功能。它不一定会最终成为稳定功能,并且在稳定之前相关 API 也可能会发生变化。
<Suspense> 是一个内置组件,用来在组件树中协调对异步依赖的处理。它让我们可以在组件树上层等待下层的多个嵌套异步依赖项解析完成,并可以在等待时渲染一个加载状态。

意思就是此组件用来等待异步组件时渲染一些额外内容,让应用有更好的用户体验

要了解 <Suspense> 所解决的问题和它是如何与异步依赖进行交互的,我们需要想象这样一种组件层级结构:

  1. <Suspense>
  2. └─ <Dashboard>
  3. ├─ <Profile>
  4. │ └─ <FriendStatus>(组件有异步的 setup())
  5. └─ <Content>
  6. ├─ <ActivityFeed> (异步组件)
  7. └─ <Stats>(异步组件)

在这个组件树中有多个嵌套组件,要渲染出它们,首先得解析一些异步资源。如果没有 <Suspense>,则它们每个都需要处理自己的加载、报错和完成状态。在最坏的情况下,我们可能会在页面上看到三个旋转的加载态,在不同的时间显示出内容。

有了 <Suspense> 组件后,我们就可以在等待整个多层级组件树中的各个异步依赖获取结果时,在顶层展示出加载中或加载失败的状态。

接下来看个简单的例子:

首先需要引入异步组件

  1. import {defineAsyncComponent} from 'vue'
  2. const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

简洁一些就是用组件实现异步的加载的这么一个效果

Home父组件代码如下:

  1. <template>
  2. <div class="home">
  3. <h3>我是Home组件</h3>
  4. <Suspense>
  5. <template #default>
  6. <Child />
  7. </template>
  8. <template v-slot:fallback>
  9. <h3>Loading...</h3>
  10. </template>
  11. </Suspense>
  12. </div>
  13. </template>
  14. <script >
  15. // import Child from './components/Child'//静态引入
  16. import { defineAsyncComponent } from "vue";
  17. const Child = defineAsyncComponent(() => import("../components/Child"));
  18. export default {
  19. name: "",
  20. components: { Child },
  21. };
  22. </script>
  23. <style>
  24. .home {
  25. width: 300px;
  26. background-color: gray;
  27. padding: 10px;
  28. }
  29. </style>

自组件Child

  1. <template>
  2. <div class="child">
  3. <h3>我是Child组件</h3>
  4. name: {{user.name}}
  5. age: {{user.age}}
  6. </div>
  7. </template>
  8.  
  9. <script>
  10. import { ref } from "vue";
  11. export default {
  12. name: "Child",
  13. async setup() {
  14. const NanUser = () => {
  15. return new Promise((resolve, reject) => {
  16. setTimeout(() => {
  17. resolve({
  18. name: "NanChen",
  19. age: 20,
  20. });
  21. },2000);
  22. });
  23. };
  24. const user = await NanUser();
  25. return {
  26. user,
  27. };
  28. },
  29. };
  30. </script>
  31.  
  32. <style>
  33. .child {
  34. background-color: skyblue;
  35. padding: 10px;
  36. }
  37. </style>
  38.  

根据插槽机制,来区分组件, #default 插槽里面的内容就是你需要渲染的异步组件; #fallback 就是你指定的加载中的静态组件。

效果如下:
请添加图片描述

到此这篇关于Vue3异步组件Suspense的使用方法详解的文章就介绍到这了,更多相关Vue3异步组件Suspense的使用方法内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号