vue3新增Suspense组件

在开始介绍 Vue 的 Suspense 组件之前，我们有必要先了解一下 React 的 Suspense 组件，因为他们的功能类似。

React 16.6 新增了组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示。

Suspense 组件常常和 React.lazy 配合使用。

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>);
}

fallback 属性接受任何在组件加载过程中你想展示的 React 元素。

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

Vue3 也新增了 React.lazy 类似功能的 defineAsyncComponent 函数，处理动态引入（的组件）。

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => import('./components/AsyncComponent.vue'))app.component('async-component', AsyncComp)

Vue3 也新增了 Suspense 组件，和 React 中的类似。

const OtherComponent = defineAsyncComponent(() => import('./OtherComponent'));<template><Suspense><template #default><OtherComponent /></template><template #fallback>Loading ...</template></Suspense>
</template>

具名插槽 fallback 接受任何在组件加载过程中你想展示的内容。

具名插槽的缩写是在 vue2.6.0 新增，跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

vue3新增Suspense组件相关推荐

vue3新增Teleport组件
在开始介绍 Teleport 之前先了解一下 React 的 Portals 特性. Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案. ReactDOM.creat ...
vue3.0学习笔记 (suspense组件 defineAsyncComponent异步引入)
通过defineAsyncComponent异步引入 <template><div><Suspense>// 这两个插槽名称是固定的// defalut:这里面写的 ...
vue3 内置组件keep-alive用法的全面介绍
vue3 内置组件keep-alive用法的全面介绍基础用法首先看一个反面例子 const app = Vue.createApp({template: `<button v-for=&qu ...
补充记录vue3中rrweb-player组件实现网页录屏的一个BUG解决
项目场景: vue3中rrweb-player组件实现网页录屏功能问题描述提示:这里描述项目中遇到的问题: 录制的视频会重复记录录制中这个按钮的状态,每打开一次开始录制视频中就会多一个按钮,bug ...
vue3内置组件（Teleport组件，Fragment组件）-传送组件，减少层级
一.传送组件(Teleport组件) 可将组件移动到 DOM 中 Vue app 之外的其他位置,主要是为了解决一些特殊场景下模态对话框组件.组件的渲染. 例子:模拟UI框架对话框组件. App.vu ...
Vue3+ Vue-cli (2) 组件篇
目录一.全局组件定义和复用性讲解二.Vue3中的局部组件三.父子组件的静态和动态传值四.组件传值时的校验操作五.组件中重要机制 - 单项数据流六.Non-props使用技巧七.组件中通过 ...
Vue3 10多种组件通讯方法
本文简介点赞 + 关注 + 收藏 = 学会了本文讲解 Vue 3.2 组件多种通讯方式的基础用法,并且使用了单文件组件 <script setup> . 众所周知,Vue.js 中一 ...
vue3.0父子组件的通信
vue3.0父子组件的通信 Vue3.0组件通信 Vue3.0组件通信 vue3.0脚手架setup内部的组件通信 1.父到子通过props 父组件 <template><div & ...
vue3返回顶部组件(丝滑)
vue3返回顶部组件(丝滑) 我这里使用了阿里的字体图标,需要自己配置一下 <template><div v-if="btnShow" style="p ...

vue3新增Suspense组件

vue3新增Suspense组件相关推荐

最新文章

热门文章