Vue3异步组件Suspense的使用方法详解

 更新时间:2023年01月26日 12:49:10   作者:Nanchen_42  
这篇文章主要介绍了Vue3异步组件Suspense的使用方法详解,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

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 就是你指定的加载中的静态组件。

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

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

相关文章

  • 解决Vue 通过下表修改数组,页面不渲染的问题

    解决Vue 通过下表修改数组,页面不渲染的问题

    下面小编就为大家分享一篇解决Vue 通过下表修改数组,页面不渲染的问题。具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    利用vue+elementUI设置省市县三级联动下拉列表框的详细过程

    在做电商项目的时候需要添加修改收货地址,如何实现三级联动选取省市区地址困扰了我不少时间,这篇文章主要给大家介绍了关于利用vue+elementUI设置省市县三级联动下拉列表框的相关资料,需要的朋友可以参考下
    2022-08-08
  • 手把手带你使用vue+node作后端连接数据库

    手把手带你使用vue+node作后端连接数据库

    为了快速学习nodejs制作后端并和数据库进行交互的方法,所以赶紧写一篇这样的文章出来,下面这篇文章主要给大家介绍了关于手把手带你使用vue+node作后端连接数据库的相关资料,需要的朋友可以参考下
    2023-03-03
  • vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解

    这篇文章主要介绍了vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • vue-cli的工程模板与构建工具详解

    vue-cli的工程模板与构建工具详解

    vue-cli提供的脚手架只是一个最基础的,也可以说是Vue团队认为的工程结构的一种最佳实践。这篇文章主要介绍了vue-cli的工程模板与构建工具 ,需要的朋友可以参考下
    2018-09-09
  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    下面小编就为大家带来一篇浅谈Vue.js 1.x 和 2.x 实例的生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Vuex入门之Module使用详解

    Vuex入门之Module使用详解

    这篇文章主要介绍了Vuex入门之Module使用详解,由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store?对象就有可能变得相当臃肿,需要的朋友可以参考下
    2023-11-11
  • vue子传父关于.sync与$emit的实现

    vue子传父关于.sync与$emit的实现

    这篇文章主要介绍了vue子传父关于.sync与$emit的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • Vue源码学习记录之手写vm.$mount方法

    Vue源码学习记录之手写vm.$mount方法

    在我们开发中,经常要用到Vue.extend创建出Vue的子类来构造函数,通过new 得到子类的实例,然后通过$mount挂载到节点,今天通过本文给大家讲解手写vm.$mount方法 ,感兴趣的朋友一起看看吧
    2022-11-11
  • 基于Vue实现图书管理功能

    基于Vue实现图书管理功能

    这篇文章主要为大家详细介绍了基于Vue实现图书管理功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10

最新评论

?


http://www.vxiaotou.com