【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选择器,如:

相关推荐
Dann Hiroaki2 小时前
笔记分享: 哈尔滨工业大学CS31002编译原理——02. 语法分析
笔记·算法
KhalilRuan2 小时前
Unity-MMORPG内容笔记-其三
笔记
九年义务漏网鲨鱼2 小时前
【大模型学习 | MINIGPT-4原理】
人工智能·深度学习·学习·语言模型·多模态
jz_ddk2 小时前
[学习] C语言数学库函数背后的故事:`double erf(double x)`
c语言·开发语言·学习
kfepiza3 小时前
Debian的`/etc/network/interfaces`的`allow-hotplug`和`auto`对比讲解 笔记250704
linux·服务器·网络·笔记·debian
爱莉希雅&&&3 小时前
技术面试题,HR面试题
开发语言·学习·面试
Chef_Chen5 小时前
从0开始学习计算机视觉--Day08--卷积神经网络
学习·计算机视觉·cnn
weixin_446260855 小时前
Isaac Lab:让机器人学习更简单的开源框架
学习·机器人
I'm写代码6 小时前
el-tree树形结构笔记
javascript·vue.js·笔记
我真不会起名字啊7 小时前
OpenSceneGraph(OSG)开发学习
学习