vue3中的Fragment、Teleport、Suspense新组件

Fragment组件

· 在Vue2中: 组件必须有一个根标签

· 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

· 好处: 减少标签层级, 减小内存占用

<template><div style="font-size: 14px;"><p> 组件可以没有根标签</p></div><div style="font-size: 14px;"><p>内部会将多个标签包含在一个Fragment虚拟元素中</p></div>
</template>

Fragment显示效果:

Teleport组件:

· Teleport 提供了一种干净的方法, 让组件的html在父组件界面外的特定标签下插入显示

to 允许接收值:

期望接收一个 CSS 选择器字符串或者一个真实的 DOM 节点。

提示:

<Teleport> 挂载时,传送的 to 目标必须已经存在于 DOM 中。理想情况下,这应该是整个 Vue 应用 DOM 树外部的一个元素。

如果目标元素也是由 Vue 渲染的,你需要确保在挂载 <Teleport> 之前先挂载该元素。

<template><button style="font-size: 14px;position: absolute;" @click="modalOpen = true">打开弹窗</button><teleport to="body"><div v-if="modalOpen" class="modal"><div>弹窗打开咯<button @click="modalOpen = false">关闭</button></div></div></teleport>
</template><script lang="ts">
import { defineComponent, ref } from 'vue'
// vue3.0版本语法
export default defineComponent({name: '组件名',setup () {const modalOpen = ref(false)return {modalOpen}}
})
</script><style>
.modal {position: absolute;top: 0; right: 0; bottom: 0; left: 0;background-color: rgba(0,0,0,.5);display: flex;flex-direction: column;align-items: center;justify-content: center;font-size: 14px;
}.modal div {display: flex;flex-direction: column;align-items: center;justify-content: center;background-color: white;width: 300px;height: 300px;padding: 5px;
}
</style>

初始页面:

点击打开弹窗:

可以看到弹窗的html内容插入在body标签下了

Suspense组件

· 它们允许我们的应用程序在等待异步组件时渲染一些后备内容,可以让我们创建一个平滑的用户体验。

defineAsyncComponent:

Vue3的defineAsyncComponent函数为我们提供了一个轻松且高效的方式来加载组件。

它允许我们使用异步方式来加载组件,从而提高我们应用程序的性能。

我们只需要将定义组件的过程与组件注册解耦,即可实现异步加载组件。

对于大型和复杂的Vue应用程序,异步加载组件是一个非常优秀的策略,

它可以显著提高应用程序的性能。

父组件代码:

<template><Suspense><template v-slot:default><!-- 同时加载两个组件 --><div style="font-size: 14px;"><AsyncComp/><AsyncAddress/></div></template><template v-slot:fallback><h1 style="font-size: 14px;">加载中...</h1></template></Suspense>
</template><script lang="ts">
/* 
异步组件 + Suspense组件Vue3的defineAsyncComponent函数为我们提供了一个轻松且高效的方式来加载组件。
它允许我们使用异步方式来加载组件,从而提高我们应用程序的性能。
我们只需要将定义组件的过程与组件注册解耦,即可实现异步加载组件。
对于大型和复杂的Vue应用程序,异步加载组件是一个非常优秀的策略,
它可以显著提高应用程序的性能。
*/
// import AsyncComp from './AsyncComp.vue'
import AsyncAddress from './AsyncAddress.vue'
import { defineComponent, defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))
// vue3.0版本语法
export default defineComponent({components: {AsyncComp,AsyncAddress},setup() {return {}},
})
</script>

AsyncComp子组件:

<template><h2>{{ msg }}</h2>
</template><script lang="ts">
import { defineComponent } from 'vue';
// vue3.0版本语法
export default defineComponent({name: "AsyncComp",setup() {// return new Promise((resolve, reject) => {//   setTimeout(() => {//     resolve({//       msg: 'AsyncComp:abc'//     })//   }, 1000)// })return {msg: "AsyncComp:abc",};},
});
</script>

AsyncAddress子组件:

<template><h2>AsyncAddress:{{ data }}</h2>
</template><script lang="ts">
import { defineComponent } from 'vue';
// vue3.0版本语法
export default defineComponent({name: "AsyncAddress",async setup() {function getData (){return new Promise((resolve, reject) => {setTimeout(() => {resolve({data: 'abc'})}, 5000)})}// 模拟接口const result = await getData()return {data: result,};},
});
</script>

初始页面显示》加载中:

5秒后页面加载完成-才同步显示两个子组件:

欢迎关注我的原创文章:小伙伴们!我是一名热衷于前端开发的作者,致力于分享我的知识和经验,帮助其他学习前端的小伙伴们。在我的文章中,你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师,还是仅仅对前端开发感兴趣,我的文章将能为你提供宝贵的指导和知识。

在我的文章中,你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识,并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者,我的文章都能够满足你的学习需求。

此外,我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展,新的框架和工具层出不穷。通过我的文章,你将会了解到最新的前端技术趋势,并了解如何应对这些变化。

我深知学习前端不易,因此我将尽力以简洁明了的方式解释复杂的概念,并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发,并提升你的技能。

如果你想了解更多关于前端开发的内容,不妨关注我的原创文章。我会不定期更新,为你带来最新的前端技术和知识。感谢你的关注和支持,我们一起探讨交流技术共同进步,期待与你一同探索前端开发的奇妙世界!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/206211.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训

大数据技术之数据安全与网络安全——CMS靶场(文章管理系统)实训 在当今数字化时代&#xff0c;大数据技术的迅猛发展带来了前所未有的数据增长&#xff0c;同时也催生了对数据安全和网络安全的更为迫切的需求。本篇博客将聚焦于大数据技术背景下的数据安全与网络安全&#xff…

Cascader 级联选择器动态加载数据的回显

如果后端没有只返回第三级的id,而是同时把第三级的名字一起返回了&#xff0c;那么就可以通过下面的方法来实现 1.在级联选择器里面加上这句代码 placeholder"请选择" 2.注册一个字符串 pleasett:"" 3.赋值 如过后端返回的有第三级的选项名 直接进行赋…

解密Kafka主题的分区策略:提升实时数据处理的关键

目录 一、Kafka主题的分区策略概述1.1 什么是Kafka主题的分区策略&#xff1f;1.2 为什么分区策略重要&#xff1f; 二、Kafka默认分区策略2.1 Round-Robin分区策略 三、自定义分区策略3.1 编写自定义分区器3.2 最佳实践&#xff1a;如何选择分区策略 四、分区策略的性能考量4.…

【JS Promise, Promise.all 与 async/await用法详解】

目录 PromisePromise基本使用Promise可进行连续回调Promise回调可接受入参1.工作原理 async/await总结参考文档&#xff1a; 异步 let a 0setTimeout(() > {a 1}, 1000)console.log(a) // 0此时这个延迟就成为异步执行的了&#xff0c;a值还没有变1就被使用输出&#xff0…

element table滚动到底部加载数据(vue3)

效果图 使用插件el-table-infinite-scroll npm install --save el-table-infinite-scroll局部导入 <template><div class"projectTableClass"><el-table v-el-table-infinite-scroll"load"></el-table></div> </temp…

C#,《小白学程序》第二十七课:大数四则运算之“运算符重载”的算法及源程序

1 文本格式 using System; using System.Text; using System.Collections; using System.Collections.Generic; /// <summary> /// 大数的四则&#xff08;加减乘除&#xff09;运算 /// 及其运算符重载&#xff08;取余数&#xff09; /// </summary> public cl…

海外热门:香港服务器和美国服务器的成本较量

​  提到 2023 年海外热门服务器&#xff0c;在整个 IDC 站长圈中&#xff0c;要数香港服务器和美国服务器的关注度一直居高不下。其实也正常&#xff0c;毕竟这两种海外服务器相较成熟。不过&#xff0c;在实际使用中&#xff0c;两者也会被拿来对比&#xff0c;最显而易见的…

WordPress安装AWS插件实现文本转语音功能

适用于 WordPress 的 AWS 插件示例演示了内容创建者如何轻松地为所有书面内容添加文本转语音功能。随着语音搜索的不断增加&#xff0c;以音频格式提供更多网站内容变得至关重要。通过添加语音功能&#xff0c;网站访客可以通过在线音频播放器和播客应用程序等新渠道使用您的内…

Dubbo3使用Zookeeper作为注册中心的方案讨论!详解DubboAdmin与PrettyZoo来监控服务的优劣!

文章目录 一&#xff1a;Dubbo注册中心的基本使用 二&#xff1a;Zookeeper注册中心的使用 1&#xff1a;依赖引入 2&#xff1a;实际开发 三&#xff1a;Zookeeper作为注册中心的使用展示 1&#xff1a;启动注册Zookeeper服务 2&#xff1a;引入注册中心 (一)&#xf…

【开源】基于JAVA的天然气工程运维系统

项目编号&#xff1a; S 022 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S022&#xff0c;文末获取源码。} 项目编号&#xff1a;S022&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 系统角色分类2.2 核心功能2.2.1 流程…

ESP32-Web-Server编程- 使用SSE 实时更新设备信息

ESP32-Web-Server编程- 使用SSE 实时更新设备信息 概述 如前所述&#xff0c;传统 HTTP 通信协议基于 Request-Apply&#xff08;请求-响应&#xff09;机制&#xff0c;浏览器&#xff08;客户端&#xff09;只能单向地向服务器发起请求&#xff0c;服务器无法主动向浏览器推…

2023亚太杯数学建模A题思路分析 - 采果机器人的图像识别技术

1 赛题 问题A 采果机器人的图像识别技术 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有一个&#xff0c;全球超过六分之一的苹果出口 自中国。中国提出了一带一路倡议…

智安网络|发现未知风险,探索渗透测试的奥秘与技巧

在当今信息时代&#xff0c;网络安全已成为组织和个人面临的重大挑战。为了保护网络系统的安全&#xff0c;渗透测试成为一种重要的手段。 一、渗透测试的基本原理 渗透测试是通过模拟黑客攻击的方式&#xff0c;对目标系统进行安全评估。其基本原理是模拟真实攻击者的思维和行…

稳定的音频来了 — 使用人工智能创作音乐(for free)

今天&#xff0c;以稳定扩散&#xff08;Stable Diffusion&#xff09;和StableLM等开源AI工具和模型而闻名的Stability AI公司推出了其首个音乐和声音生成AI产品——StableAudio。音乐产业以其难以打入而闻名。即使您拥有才华和动力&#xff0c;您仍然需要创作和制作音乐所需的…

ESP32单片机案例

工具&#xff1a;VScode PlatformIO IDE 注&#xff1a;B站视频学习笔记。 1、继电器 1&#xff09;硬件电路 2&#xff09;程序 #include <Arduino.h> #define RELAY_PIN 15//初始化定时器 hw_timer_t *timer NULL;void timer_interrupt(){digitalWrite(RELAY_PIN…

C++设计模式——原型 (克隆)模式

一、什么是原型模式 Prototype模式说简单点&#xff0c;就是提供了一个clone, 通过已存在对象进行新对象创建。clone&#xff08;&#xff09;实现和具体的实现语言相关&#xff0c;在C中我们通过拷贝构造函数实现。 那为啥要写clone的接口来实现这个目的呢&#xff1f;直接使…

如何在本地安装部署WinSCP,并实现公网远程本地服务器

可视化文件编辑与SSH传输神器WinSCP如何公网远程本地服务器 文章目录 可视化文件编辑与SSH传输神器WinSCP如何公网远程本地服务器1. 简介2. 软件下载安装&#xff1a;3. SSH链接服务器4. WinSCP使用公网TCP地址链接本地服务器5. WinSCP使用固定公网TCP地址访问服务器 1. 简介 …

【刷题笔记】分糖果||数组||暴力通过||符合思维方式||多案例分析

分发糖果 文章目录 分发糖果1 题目描述2 题目分析2.1 寻找波峰波谷2.2 从波底往波峰攀爬&#xff01;2.2 计算糖果 3 代码附录1 1 题目描述 https://leetcode.cn/problems/candy/ n 个孩子站成一排。给你一个整数数组 ratings 表示每个孩子的评分。 你需要按照以下要求&…

猜-MISC-bugku-解题步骤

——CTF解题专栏—— 题目信息&#xff1a; 题目&#xff1a;猜 作者&#xff1a;harry 提示&#xff1a; 解题附件&#xff1a;flag格式key{图中人物名字全拼} 解题思路&#xff1a; 这......头都没有&#xff0c;让我guess&#xff1f;&#xff1f;&#xff1f;详细信息看…

Go 从编译到执行

一、Go运行编译简介 Go语言&#xff08;也称为Golang&#xff09;自从2009年由Google发布以来&#xff0c;已成为现代软件开发中不可或缺的一部分。设计者Rob Pike, Ken Thompson和Robert Griesemer致力于解决多核处理器、网络系统和大型代码库所引发的现实世界编程问题。我们…