【vue3学习笔记】compositionAPI的优势;Fragment组件;Teleport组件

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

课程 P164节 《compositionAPI的优势》笔记

在vue2中,使用的是optionsAPI,即配置项式的,同一个功能的组成部分是拆分的,分散到了不同的配置项中,如data、methods、computed等。当功能增多时,代码会变得不好组织和维护。

vue3的compositionAPI 很好地改进了vue2 optionsAPI的这个问题,可以根据功能将相关代码组织在一起;并且可以把所有的数据、方法、计算属性等按照功能点进行打包,打出来的包就是hook函数,用hook函数的方式可以更优雅地组织代码,每个hook函数中都是与该功能点相关的代码,而在需要实现该功能点的组件中,只需要调用一下这个hook函数就可以了。

课程 P165节 《Fragment组件》笔记

课程 P166节 《Teleport组件》笔记

如下例子,祖组件中有个父组件,父组件中又嵌套了孙组件,孙组件中引入了一个弹框组件,可以看到,弹框显示时,其html结构是在孙组件之中的,显示时会将其所在的孙组件高度撑开,从而造成父组件与祖组件的高度都被同步撑开了。且此时存在一个问题,如果想让弹框相对body定位到居中位置,则需要一层一层向外层元素去找到body去定位,中间有任何一个元素有定位效果,都会影响到弹框的定位,实现想让弹框相对body居中定位非常困难。

此时,teleport组件可以大显身手了。只要将需要"单拎"出来的结果用一个teleport标签包裹,并用一个to属性告知将这些结构"单拎"到那个元素下,就可以实现html元素的"瞬移"了:

可以看到,弹框结构真的被"单拎"出来,"瞬移"到了body元素下:

美化弹框,增加遮罩层效果:将弹框用一个遮罩层元素包裹,并将弹框的显示隐藏控制移动到遮罩层上。很多UI库都是这样处理的,弹框放在遮罩层元素里,通过控制遮罩层同时控制弹框:

弹框效果如下:

最后,teleport标签的to属性中还可以使用css选择器,如:

相关推荐
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
萘柰奈2 天前
Unity学习----【进阶】TextMeshPro学习(三)--进阶知识点(TMP基础设置,材质球相关,两个辅助工具类)
学习·unity
沐矢羽2 天前
Tomcat PUT方法任意写文件漏洞学习
学习·tomcat
好奇龙猫2 天前
日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书,共120语法(10):91-100语法+考え方13
学习
向阳花开_miemie2 天前
Android音频学习(十八)——混音流程
学习·音视频
工大一只猿2 天前
51单片机学习
嵌入式硬件·学习·51单片机
c0d1ng2 天前
量子计算学习(第十四周周报)
学习·量子计算
Hello_Embed2 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件