【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选择器，如：