内置组件——teleport，Transition，KeepAlive

teleport——把组件移动到指定容器中去

除了移到body上还可以移到任意节点上，比如id="app"节点上就 <teleport to="#app"> ... </teleport>

关键属性	作用
to	String，要移到哪个节点; body, #xxid, .xxclass, [xxattribute]
disabled	boolen，当为true时不一动，当为false时移动

一种使用场景：

里面有两个模块，为了符合逻辑/语义化，这两个模块是应该包含在这一个div中的，其中一个需要相对于当前div做绝对定位，但是另一个要相当于body做绝对定位（矛盾了）

father.vue:

<div style="position: relative;">
  <son style="position: absolute;">  我要在father的正中心  </son>
  <daughter style="position: absolute;">  我虽然是father的daughter，但是我要在body的正中心  </daughter>
</div>

对于daughter和son的共同需求，又必须都是father的child的条件下，我们需要为daughter重新找一个定位参照

方式一：在daughter.vue内部加teleport
daughter.vue

<teleport to="body">    //这样就把daughter移到了body上去，虽然在vue文件中，daughter写在father内，但渲染时，daughter是body子节点
  <slot....balabala
<teleport>

方式二：在daughter标签上加teleport
father.vue

<div style="position: relative;">
  <son style="position: absolute;">  我要在father的正中心  </son>
  <teleport to="body">
      <daughter style="position: absolute;">  我对然是father的daughter，但是我要在body的正中心  </daughter>
  </teleport>
</div>

Transition动画过渡

https://vuejs.org/guide/built-ins/transition.html#dynamic-transitions

名字	作用
name?: string	用于自动生成转换CSS类名。如：'name: fade'将自动扩展为'.fade-enter'，'fade-enter-active'等。
css?: true	是否应用CSS转换类
type?: 'transition'	指定要等待的转换事件的类型
duration?: number
mode?: 'in-out'	控制离开/进入过渡的时间顺序
appear?: false	是否在初始渲染时应用过渡。

用于为组件的各个阶段设置class。例如enter-from-class="xxx

名字	阶段（这是一个看起来镜像的过程）
enter-from-class?: string	在渲染开始时，时长为1帧
enter-active-class?: string	从渲染开始-->完成，这一整段时间（这段时间的长短可以由duration定义，也可以在该class里自己定义）
enter-to-class?: string	进入动画完成时，时长为1帧
leave-to-class?: string	离开的开始，1帧
leave-active-class?: string	离开动画
leave-from-class?: string	离开的结束，1帧(这个没有什么意义，因为组件已经消失了)

挑几个属性展示用法：

//第一种方法示例：
<Transition name="feade">
  <div class="box" v-if="show"></div>
</Transition>
<style>
.feade-enter-active {    //此处feade和Transtion的name是统一的，不是偶然
    animation: feade-in 0.5s;
}
.feade-leave-active {
    animation: feade-in 0.5s reverse;
}
@keyframes feade-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
</style>
//第二种方法示例：这种情况可以没有name
<Transition 
  enter-active-class="enter"
  enter-active-class="leave"
>
  <div class="box" v-if="show"></div>
</Transition>
<style>
.enter{
    animation: feade-in 0.5s;
}
.leave{
    animation: feade-in 0.5s reverse;
}
@keyframes feade-in {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1);
    }
}
</style>

用于为各个阶段设置特定函数

名字	对应
@before-enter	enter-from-class
@enter	enter-active-class
@after-enter	enter-to-class
@before-leave	leave-to-class
@leave	leave-active-class
@after-leave（leave-from-class没什么用，但我有用）	leave-from-class

KeepAlive缓存组件

当组件被卸载时会被缓存，下次再启用该组件时，就不会重新渲染，而是直接复用，这样会保存组件卸载前的状态（该组件卸载前是什么样，再回来就是什么样，当然动态数据还是会马上重新渲染的）
一个keepalive里只能有一个组件

import { ref } from 'vue';
const whichone = ref(true)
function switchCom() {
    whichone.value = !whichone.value
}
<button @click="switchCom">switch</button>
<keep-alive>
   <Child v-if="whichone" />
</keep-alive>
<keep-alive>
    <Daught v-if="!whichone" />
</keep-alive>