从Vue2到Vue3【五】——新的组件（Fragment、Teleport、Suspense）

news2024/9/29 7:26:59

系列文章目录

内容链接
从Vue2到Vue3【零】Vue3简介
从Vue2到Vue3【一】Composition API（第一章）
从Vue2到Vue3【二】Composition API（第二章）
从Vue2到Vue3【三】Composition API（第三章）
从Vue2到Vue3【四】Composition API（第四章）

文章目录

  • 系列文章目录
  • 前言
  • 一、Fragment
  • 二、Teleport
  • 三、Suspense
  • 总结

前言

随着Vue 3的发布，我们迎来了一套强大且令人兴奋的组合式API，这为开发者带来了更多灵活性和可维护性。Vue 3的组合式API不仅改变了我们编写Vue组件的方式，还引入了一些新的组件和一些小的但实用的改变。在这篇文章中，我们将深入探讨vue3新的组件以及带来的一些其他小的变化，让我们一起开始这个令人兴奋的学习之旅吧！

一、Fragment

  • Fragment(片段)

    • 它允许我们在Vue模板中返回多个元素，而无需添加额外的包裹元素。(不再需要根标签)

      我们可以将多个元素作为Fragment的子元素来返回，并且Fragment本身不会被渲染到DOM中。这样可以避免引入不必要的父元素，减少标签层级，使得模板结构更加清晰， 减小内存占用。
      在这里插入图片描述

二、Teleport

  • Teleport(传送门)

    • Teleport组件允许我们将子元素渲染到DOM树的指定位置，而不是直接在当前组件的模板中渲染。

    这对于需要在组件外的指定元素中渲染内容（比如弹出层、模态框等）非常有用。我们可以使用Teleport组件的to属性来指定目标元素的选择器或DOM节点。

    案例：将dialog组件中的弹出层传送到body身上
    dialog.vue组件代码

<template>
	<div>
		<button @click="isShow = true">点我弹个窗</button>
		<teleport to="body">   
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一个弹窗</h3>
					<button @click="isShow = false">关闭弹窗</button>
				</div>
			</div>
		</teleport>

	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'diaLog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
</script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

请添加图片描述

传送到body身上的mask遮罩层和#app同级，但是即使设置样式时有加scoped,样式依然生效

Teleport只改变了渲染的 DOM 结构，它不会影响组件间的逻辑关系。也就是说，如果 Teleport包含了一个组件，那么该组件始终和这个使用了 teleport 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。
这也意味着来自父组件的注入也会按预期工作，子组件将在 Vue Devtools 中嵌套在父级组件下面，而不是放在实际内容移动到的地方。

  • 禁用 Teleport​
    在某些场景下可能需要视情况禁用 Teleport。举例来说，我们想要在桌面端将一个组件当做浮层来渲染，但在移动端则当作行内组件。我们可以通过对 Teleport动态地传入一个 disabled prop 来处理这两种不同情况。
<Teleport :disabled="isMobile">
  ...
</Teleport>

disabled为true则禁止传送，并且teleport内的内容在原地照常显示

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。
  • 多个 Teleport 共享目标​
    一个可重用的模态框组件可能同时存在多个实例。对于此类场景，多个 Teleport 组件可以将其内容挂载在同一个目标元素上，而顺序就是简单的顺次追加，后挂载的将排在目标元素下更后面的位置上。

比如下面这样的用例：
child组件

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		<teleport to = ".modals">
			<div>1</div>
		</teleport>
		<teleport to=".modals">
			<div>2</div>
		</teleport>
		<teleport to=".modals">
			<div>3</div>
		</teleport>
		<Son/>
	</div>
</template>

App组件

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<div class="modals"></div>
		<Child/>
	</div>
</template>

渲染的结果为（依次传送）：

在这里插入图片描述

  • 注意点
    teleport在使用时，传送（to）的地方一定要先挂载好，否则当你未挂载好就要to时，会找不到要传送的地方，就会报错
    在这里插入图片描述
    在这里插入图片描述
    比如说：to的地方后渲染，在传送时就会找不到目标节点
		<teleport to=".header">
			<div>3</div>
		</teleport>
		<div class="header">
		</div>

改成这样，就正常传送了

		<div class="header">
		</div>
		<teleport to=".header">
			<div>3</div>
		</teleport>

三、Suspense

  • Suspense(悬念)
    • 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

Suspense组件允许我们在异步加载组件时显示一个占位符，直到组件加载完成。这个占位符可以是一个自定义的loading组件或者其他内容。当异步组件加载完成后，Suspense组件会自动替换占位符为实际组件。这提供了更优雅的方式来处理异步加载的组件，并且可以方便地显示加载状态。

使用场景：当数据还没请求回来时，做一个loading的场景
使用步骤：

  • 1.异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
  • 2.使用Suspense包裹组件，并配置好default与 fallback
    default里的内容是要显示的，fallback里的内容是loading的
<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			</template>
			<template v-slot:fallback>
				<h3>稍等，加载中...</h3>
			</template>
		</Suspense>
	</div>
</template>

<script>
	// import Child from './components/Child'//静态引入
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

child组件里，可以搭配setup使用

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'chIld',
		async setup(){
			let sum = ref(0)
			// 模拟请求服务器数据 服务器返回sum
			let p = new Promise((resolve)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

由于这里child的组件返回的数据是异步的，child组件一直加载不好，所以在child加载期间，一直显示loading的页面

请添加图片描述

也不一定要有异步请求的时候搭配setup用Suspense，有时候一个组件太庞大了，加载的很慢，就可以利用异步加载这个庞大的组件

假设这个child.vue组件是一个很庞大的组件，由于“木桶效应”，加载页面的速度取决于耗时最长的那个，所以耗时长的组件可以异步加载，先用loading代替其的位置

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'chIld',
		setup(){
			let sum = ref(0)
			return {
				sum
			}
		}
	}
</script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

请添加图片描述

总结

本文讲解到这，详细讲解完了vue3中新增的三个组件(Fragment、Teleport、Suspense)，这些新增的组件为Vue 3带来了更多的灵活性和便利性。它们使得组件化开发更加简单且功能更丰富，为开发者提供更多的选择和工具来构建高效、可维护的应用程序。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

STM32CUBUMX配置FLASH(W25Q128)--保姆级教程

STM32CUBUMX配置FLASH(W25Q128)--保姆级教程

———————————————————————————————————— ⏩ 大家好哇&#xff01;我是小光&#xff0c;嵌入式爱好者&#xff0c;一个想要成为系统架构师的大三学生。 ⏩最近在开发一个STM32H723ZGT6的板子&#xff0c;使用STM32CUBEMX做了很多驱动&#x…
阅读更多...
服务网格技术对比：深入比较Istio、Linkerd和Envoy等服务网格解决方案的优缺点

服务网格技术对比：深入比较Istio、Linkerd和Envoy等服务网格解决方案的优缺点

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
Github上方导航栏介绍

Github上方导航栏介绍

Code Watch&#xff1a;相当于关注&#xff0c;到时候这个项目又有什么操作&#xff0c;就会以通知的形式提醒你。 Fork&#xff1a;也就是把这个项目拉到你的仓库里&#xff0c;之后你可以对该代码进行修改&#xff0c;之后你可以发起Pull Request&#xff0c;简称PR&#xf…
阅读更多...
SpringBoot集成kafka全面实战

SpringBoot集成kafka全面实战

本文是SpringBootKafka的实战讲解&#xff0c;如果对kafka的架构原理还不了解的读者&#xff0c;建议先看一下《大白话kafka架构原理》、《秒懂kafka HA&#xff08;高可用&#xff09;》两篇文章。 一、生产者实践 普通生产者 带回调的生产者 自定义分区器 kafka事务提交…
阅读更多...
Windows下基于VSCode搭建C++开发环境（包含整合MinGW64、CMake的详细流程）

Windows下基于VSCode搭建C++开发环境（包含整合MinGW64、CMake的详细流程）

最近想写写C&#xff0c;装了VisualStudio 2022&#xff0c;折腾半天。对于一个用惯VSCode的人来说&#xff0c;总感觉IDE太笨重。于是自己网上各种查资料&#xff0c;自己琢磨&#xff0c;搭建了一套Windows下基于VSCode和CMake的C轻量级开发环境。 具体搭建步骤 1. 下载并安…
阅读更多...
golang 冒号等于号 := 的注意事项和全局和局部变量的使用

golang 冒号等于号 := 的注意事项和全局和局部变量的使用

全局变量错误用法&#xff1a; 全局变量正确用法&#xff1a;
阅读更多...
ChatGPT应用探索：自动文本生成的无限可能

ChatGPT应用探索：自动文本生成的无限可能

&#x1f337;&#x1f341; 博主 libin9iOak带您 Go to New World.✨&#x1f341; &#x1f984; 个人主页——libin9iOak的博客&#x1f390; &#x1f433; 《面试题大全》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33…
阅读更多...
基于一致性引导的元学习bootstraping半监督医学图像分割

基于一致性引导的元学习bootstraping半监督医学图像分割

文章目录 Consistency-guided Meta-Learning for Bootstrapping Semi-Supervised Medical Image Segmentation摘要本文方法实验结果 Consistency-guided Meta-Learning for Bootstrapping Semi-Supervised Medical Image Segmentation 摘要 医学成像取得了显著的进步&#xf…
阅读更多...
3.Java面试题—JVM基础、内存管理、垃圾回收

3.Java面试题—JVM基础、内存管理、垃圾回收

七、JVM 一、JVM 基础 一篇文章掌握整个JVM&#xff0c;JVM超详细解析&#xff01;&#xff01;&#xff01; 什么是Java虚拟机? Java虚拟机(JVM) 是用来 解析和运行Java程序 的一种 虚拟机。编译器 将 Java ⽂件 编译成 平台无关 的 Java 字节码文件 (.class)&#xff0c;…
阅读更多...
嵌入式：QT Day1

嵌入式：QT Day1

一、手动实现登录框 源码&#xff1a; widge.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> //用于打印输出 #include <QIcon> //图标头文件 #include <QPushButton> //按钮类头文件 #includ…
阅读更多...
Hadoop 之 Spark 配置与使用（五）

Hadoop 之 Spark 配置与使用（五）

Hadoop 之 Spark 配置与使用 一.Spark 配置1.Spark 下载2.单机测试环境配置3.集群配置 二.Java 访问 Spark1.Pom 依赖2.测试代码1.计算 π 三.Spark 配置 Hadoop1.配置 Hadoop2.测试代码1.统计字符数 一.Spark 配置 环境说明环境版本AnolisAnolis OS release 8.6Jdkjava versi…
阅读更多...
【node.js】01-fs读写文件内容

【node.js】01-fs读写文件内容

目录 一、fs.readFile() 读取文件内容 二、fs.writeFile() 向指定的文件中写入内容 案例&#xff1a;整理txt 需求&#xff1a; 代码&#xff1a; 一、fs.readFile() 读取文件内容 代码&#xff1a; //导入fs模块&#xff0c;从来操作文件 const fs require(fs)// 2.调…
阅读更多...
ClickHouse（一）：ClickHouse介绍及OLAP场景特征

ClickHouse（一）：ClickHouse介绍及OLAP场景特征

目录 1. ClickHouse与其特性 ​​​​​​​2. 什么是ClickHouse ​​​​​​​3. OLAP场景的特征 进入正文前&#xff0c;感谢宝子们订阅专题、点赞、评论、收藏&#xff01;关注IT贫道&#xff0c;获取高质量博客内容&#xff01; ​​​​​​​1. ClickHouse与其特性 …
阅读更多...
刷题小总结

刷题小总结

数组 数组是存放在连续内存空间上的相同类型数据的集合。 经典题目&#xff1a; 二分查找 双指针法 滑动窗口 模拟行为 链表 链表的种类主要为&#xff1a;单链表&#xff0c;双链表&#xff0c;循环链表链表的存储方式&#xff1a;链表的节点在内存中是分散存储的&…
阅读更多...
php项目内存飚高处理与优化

php项目内存飚高处理与优化

公司服务器最近内存占用超过阈值一直报警 经过排查,内存占用很多&#xff0c;剩余很少 free -m 排查代码无太多冗余和缓存 最后和运维一起排查&#xff0c;发现宝塔安装后带的gitlab的进程很吃内存&#xff0c;赶紧停用&#xff0c;并卸载无用的软件 最后内存降下来了
阅读更多...
大数据Flink（四十九）：框架版本介绍和编程语言选择

大数据Flink（四十九）：框架版本介绍和编程语言选择

文章目录 框架版本介绍和编程语言选择 一、框架版本介绍 二、编程语言选择 框架版本介绍和编程语言选择
阅读更多...
Udp编程 - 客户端和服务端的注意事项

Udp编程 - 客户端和服务端的注意事项

网上有很多教程&#xff0c;他们说发送使用sendto,接收使用recvfrom就可以&#xff0c;确实如此。但是你会用吗? 我们以QT(C)为例,来使用这个udp实现自发自收的功能(途中我们会用到QThread来开启我们的线程) 服务端(线程) #include "udpserverthread.h" #include …
阅读更多...
MySQL数据库配置及创建用户和授权

MySQL数据库配置及创建用户和授权

注意&#xff1a; 都是基于MySQL8.0以上版本 1、检查是否安装过sql [rootlocalhost ~]# rpm -[qa](https://so.csdn.net/so/search?qqa&spm1001.2101.3001.7020) | grep mysql[rootlocalhost ~]# rpm -qa | grep [mariadb](https://so.csdn.net/so/search?qmariadb&…
阅读更多...
Day 66-68 主动学习之ALEC

Day 66-68 主动学习之ALEC

代码&#xff1a; package dl;import java.io.FileReader; import java.util.*; import weka.core.Instances;/*** Active learning through density clustering.*/ public class Alec {/*** The whole dataset.*/Instances dataset;/*** The maximal number of queries that …
阅读更多...
修改密码和再次确认密码的js和element-ui的使用

修改密码和再次确认密码的js和element-ui的使用

<template><div><!-- plan的插槽 --><plan title"修改密码"><!-- 插槽的名字 --><span slot"header">修改密码</span><el-form:model"ruleForm2"status-icon:rules"rules2"ref"rul…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023