Vue3.0的新特性（8）Suspense

Suspense是Vue3推出的一个内置组件，它允许我们的程序在等待异步组件时渲染一些后备的内容，可以让我们创建一个平滑的用户体验；Vue中加载异步组件其实在Vue2.x中已经有了，我们用的vue-router中加载的路由组件其实也是一个异步组件：

export default {name: "Home",components: {AsyncButton: () => import("../components/AsyncButton"),},
}

在Vue3中重新定义，异步组件需要通过defineAsyncComponent来进行显示的定义：

// 全局定义异步组件
//src/main.js
import { defineAsyncComponent } from "vue";
const AsyncButton = defineAsyncComponent(() =>import("./components/AsyncButton.vue")
);
app.component("AsyncButton", AsyncButton);// 组件内定义异步组件
// src/views/Home.vue
import { defineAsyncComponent } from "vue";
export default {components: {AsyncButton: defineAsyncComponent(() =>import("../components/AsyncButton")),},
};

同时对异步组件的可以进行更精细的管理：

export default {components: {AsyncButton: defineAsyncComponent({delay: 100,timeout: 3000,loader: () => import("../components/AsyncButton"),errorComponent: ErrorComponent,onError(error, retry, fail, attempts) {if (attempts <= 3) {retry();} else {fail();}},}),},
};

这样我们对异步组件加载情况就能掌控，在加载失败也能重新加载或者展示异常的状态：

[表情]异步组件加载失败
我们回到Suspense，上面说到它主要是在组件加载时渲染一些后备的内容，它提供了两个slot插槽，一个default默认，一个fallback加载中的状态：

<template><div><button @click="showButton">展示异步组件</button><template v-if="isShowButton"><Suspense><template #default><AsyncButton></AsyncButton></template><template #fallback><div>组件加载中...</div></template></Suspense></template></div>
</template>
<script>
export default {setup() {const isShowButton = ref(false);function showButton() {isShowButton.value = true;}return {isShowButton,showButton,};},
}
</script>

异步组件加载显示占位

非兼容的功能

非兼容的功能主要是一些和Vue2.x版本改动较大的语法，已经在Vue3上可能存在兼容问题了。

Vue3.0的新特性（8）Suspense相关推荐

Vue3.0系列(一): VUE3.0的新特性
和Vue2.0 相比,Vue3.0有哪些亮点: 序号特性解析 1 Performance 性能上比Vue2.0快1.3-2倍 2 Tree shaking support 按需编译,体积更加轻量化 ...
vue3 + vite + ts + setup , 第十二练 Vue3 css style 新特性，样式穿透，插槽选择器，全局选择器，在vue3中使用tailwindcss
一.vue3.x 样式新特性样式穿透深度选择器 <style scoped> .a :deep(.b) {/* ... */ } </style> 插槽选择器 <s ...
vue3的一些新特性
vue3的一些新特性编译 diff方法优化 hoistStatic 静态提升 cacheHandlers 事件侦听器缓存 ssr渲染 Composition API 核心api 逻辑提取与复用变化 ...
.NET 4.0 Interop新特性ICustomQueryInterface （转载）
.NET 4.0 Interop新特性ICustomQueryInterface 在.NET Framework v4.0发布的新功能中,在名字空间System.Runtime.InteropServ ...
.NET Framework 4.0的新特性
本文将揭示.NET 4.0中的3个新特性:图表控件.SEO支持以及ASP.NET 4可扩展的输出缓存. 图表控件微软向开发者提供了大量可免费下载的图表控件,可以在.NET 3.5 ASP.NET或W ...
mysql 5.0 php_PHP 5.0的新特性
PHP 5.0的新特性最近,读者可以从PHP 4.x版本转移到PHP 5.0版本.正如读者期望的那样,在一个新的主要版本中,它做出了一些重要变更.在这个版本中,PHP后台的Zend引擎经过了完全的重 ...
Tensorflow 2.0的新特性
Tensorflow 2.0的新特性几天前,Tensorflow刚度过自己的3岁生日,作为当前最受欢迎的机器学习框架,Tensorflow在这个宝座上已经盘踞了近三年.无论是成熟的Keras,还是风 ...
java 7.0 特性_JDK7.0语法新特性
JDK7.0语法新特性 1,菱形语法(泛型实例化类型自动推断) List list = new ArrayList<>(); // <>这个真的很像菱形 2,在目前版本中,不可 ...
盘点Greenplum 6.0六大新特性及展望
导读:本文介绍Greenplum 6.0的新特性. 作者:王春波来源:大数据DT(ID:hzdashuju) Greenplum 6.0于2019年9月4日正式发布,内核版本从PostgreSQL ...
C# 8.0 的新特性概览和讲解
本文转自 https://blog.csdn.net/hez2010/article/details/84036742 C# 8.0 的新特性概览和讲解前言新的改变可空引用类型(Nullable ...

Vue3.0的新特性（8）Suspense

Vue3.0的新特性（8）Suspense相关推荐

最新文章

热门文章