简介

目前这是一个实验性的组件，官方并不推荐在正式环境中使用点击

写到这里，感觉vue和react越来越像了，点击
他用于加载异步组件的时候，当异步组件还未加载出来的时候优先显示一些内容，如骨架屏等
只是我们在使用的时候需要使用vue的插槽语法点击

例子

异步组件

<script setup>
const asyncFunc = () => {return new Promise((resolve, reject) => {setTimeout(() => {resolve("hello world")}, 2000)})
}const param = await asyncFunc()
</script><template><h2>{{ param }}</h2>
</template>

使用Suspense

<script setup>
import { defineAsyncComponent } from "vue"
// 引入异步组件
const AsyncComponent = defineAsyncComponent(() => import("./AsyncComponent.vue"))
</script><template><h2>Suspense</h2><Suspense><template v-slot:default><!-- 放异步组件 --><AsyncComponent /></template><template v-slot:fallback><!-- 当异步组件还没有加载出来需要显示的内容 --><div>Loading...</div></template></Suspense>
</template>

当我们刷新加载异步组件的时候就会发现，在没有加载出异步组件的时候，会先显示loading，这样会有一个比较好的用户体验

Vue3之Suspense相关推荐

vue3新增Suspense组件
在开始介绍 Vue 的 Suspense 组件之前,我们有必要先了解一下 React 的 Suspense 组件,因为他们的功能类似. React 16.6 新增了组件,让你可以"等待&q ...
Vue3基础难点总结
区别生命周期的变化整体来看,变化不大,只是名字大部分需要 + on,功能上类似.使用上 Vue3 组合式 API 需要先引入:Vue2 选项 API 则可直接调用,如下所示. // vue3 &l ...
在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别
目录前言正文一.Vue3 与 Vue2 区别概览二.Vue3 与 Vue2 区别详述生命周期多根节点 Composition API 异步组件(Suspense) Teleport 响应式 ...
Vue3 学习总结笔记 (十四)
文章目录 1. Vue3 之生命周期 2. Vue3 之自定义hook函数 3. Vue3 之 toRef 和 toRefs的使用 4. Vue3 之 shallowReactive 和 shal ...
Vue3组合式Api script setup模式中顶层使用await报Top-level ‘await‘ expressions are only allowed when the ‘module‘
今天练习Vue3的Suspense组件的时候碰到在Vue3组合式Api script setup模式中顶层使用await时报错Eslint错误(能正常编译),错误提示是: Top-level 'awa ...
抄笔记：尤雨溪在Vue3.0 Beta直播里聊到了这些…
前言在 4 月 21 日晚,Vue 作者尤雨溪在哔哩哔哩直播分享了Vue.js 3.0 Beta最新进展. 以下是直播内容整理 1. 全新文档RFCs Vue.js 3.0 Beta发布后的工作重点 ...
前端必读 0基础学习一文看懂 Vue3 对比 Vue2 发生哪些变化
望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3. 内容混杂用法 + 原理 + 使用小心得,建议收藏,慢慢看. 区别生命周期的变化整体来看,变化不大,只是名字大部分需要 ...
Vue3 与 Vue2 对比有哪些变化，你会怎么回答？
↓推荐关注↓ 前言希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3. 内容混杂用法 + 原理 + 使用小心得,建议收藏,慢慢看. 区别生命周期的变化整体来看,变化不大 ...
【Vuejs】1426- 深入解析 Vue 3 基础难点
希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3. 内容混杂用法 + 原理 + 使用小心得,建议收藏,慢慢看. 区别生命周期的变化整体来看,变化不大,只是名字大部分需要 ...

Vue3之Suspense

简介

例子

Vue3之Suspense相关推荐

最新文章

热门文章