一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
内置组件中vue3添加了新的Teleport组件，因为新添加了内置组件正好也重温一下其他的内置组件~
传送组件 Teleport
介绍：将模板渲染至指定的DOM接节点，不受父级的style和v-show属性的影响（但是会受v-if的影响，因为v-if的优先级高于Teleport），不过数据可以共同使用。
使用：通过标签内to可以指定元素位置（真的超级像哆啦A梦的任意门有木有~），还可以通过对于disabled(布尔类型)设置是否禁用传送。
使用场景：例如多层组件嵌套中，基于body进行显示隐藏的模态框。这样此组件会隔离样式，根据指定的DOM进行渲染。
代码示例：
<template>
<div class="home">
hh
<Teleport to="body">
<div class="test">123</div>
</Teleport>
</div>
</template>
上图中名为test的html代码已经在body下面了
keep-alive缓存组件
同vue2一样，这里简单介绍
介绍：避免多次渲染消耗性能和重新渲染时影响用户体验，所以将组件缓存下来的一个组件。
生命周期：
第一次进入：触发onMounted，onActivated
退出：触发deactivated
再次进入：触发onActivated
按照开发需求使用其生命周期。
使用：将需要缓存的组件使用keep-alive进行包裹，keep-alive只能包裹一个组件。
transition动画组件
此处引用官方介绍
- 简单的基于css的过渡
下面是六个应用与进入与离开过渡效果的CSS class
下面的
v代表的是transition组件中的name名称
<Transition name="fade">
...
</Transition>
1、v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2、 v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3、v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
4、v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
5、v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6、v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。
- 自定义class
当我们不想使用官方定义的class名称时，可以通过官方的props指定自定义的class：
enter-from-class、
enter-active-class、
enter-to-class、
leave-from-class、
leave-active-class、
leave-to-class
这些class会覆盖相应阶段默认的class
使用场景：在vue的动画机制下集成其他第三方CSS动画库。
- JS钩子函数
可以通过监听<Transition>组件中的过度方式，挂载钩子函数
1、@before-enter:在元素被插入到DOM之前调用。
2、@enter:在元素被插入到DOM之后的下一帧被调用，用这个开始进入动画，如果调用其中的回调函数done()，则表示过渡结束。
3、@after-enter、@enter-cancelled:进入过渡完成时调用。
4、@before-leave:在leave钩子之前调用，不过大多数时候应该只会用到leave钩子。
5、@leave: 离开过渡开始时调用，使用这个来开始离开动画，如果调用其中的回调函数done()，则表示过渡结束，如果与css结合使用则这个回调是个可选参数。
6、@after-leave:在离开过渡完成、且元素已经从DOM中移除时调用。
7、@leave-cancelled: 仅仅在v-show过渡时候可以调用。
注意：当我们使用仅有JS执行的动画时，最好加上:css="false" prop，这样可以跳过CSS过渡的自动探测，既可以优化性能又可以防止CSS规则干扰过渡。
- 出现时过渡
使用场景：在某个节点初次渲染时需要用到的过渡效果，添加 appear
<Transition appear>
...
</Transition>
这里仅作常用基本介绍，更多props及细节见官方~
假期后上班第一天，头疼，卷不动了，假期综合征~😵
