keep-alive

keep-alive 是V3的内置组件，当我们不希望组件被重新渲染的时候，出于性能的考虑，这时候就使用keep-alive来提高性能，他可以将组件内容缓存下来，不会让他重复渲染，造成性能损耗

定义两个组件，当A组件里面的input输入值的时候，切换到B组件进行一些操作，返回A组件时，此时页面又开始重新加载

  <button @click="flag = !flag">切换组件</button>
    <A v-if="flag"></A>
    <B v-else></B>

const flag = ref<boolean>(true)

这时候利用keep-alive，将我们A组件数据自动缓存起来，当执行B组件的一系列操作时，返回A组件，数据依然存在，增加用户体验

    <keep-alive>
      <A v-if="flag"></A>
      <B v-else></B>
    </keep-alive>

include

include缓存组件的名称，支持字符串，正则，数组；当我们只想缓存A组件，定义:include="['A']"即可，需要注意的是需要在子组件定义name属性

<keep-alive :include="['A']">
      <A v-if="flag"></A>
      <B v-else></B>
    </keep-alive>

exclude不缓存组件，不想缓存那个组件就定义那个，需要注意的是需要在子组件定义name属性

   <KeepAlive :exclude="['A']">
      <A v-if="flag"></A>
      <B v-else></B>
    </KeepAlive>

max通过传入的max数量来限制可被缓存的最大组件实列数

   <KeepAlive :max="10">
      <A v-if="flag"></A>
      <B v-else></B>
    </KeepAlive>

定义keepAlive后会新增onDeactivated、onActivated两个生命周期

执行顺序

    graph TD
    onMounted --> onActivated --> onDeactivated --> onUnmounted

    初始化 --> keep-alive初始化 --> keep-alive卸载 --> 卸载