vue3+vite+ts--KeepAlive缓存组件

一、使用

1.  KeepAlive主要是缓存离开页面的数据（回来的时候数据还在）的减少dom渲染降低性能
2.  KeepAlive缓存的组件的生命周期的变化:

          初次进入时：created(setup)> onMounted> onActivated 

          退出后触发 deactivated

          再次进入：只会触发 onActivated不会在触发created(setup)和 onMounted

<template>
  <div class="about">
    <div>
      <el-button @click="comp(A)">A组件</el-button>
      <el-button @click="comp(B)">B组件</el-button>
    </div>
    <!-- 1.动态组件绑定 is 属性切换 -->
    <KeepAlive>
      <component  :is="componet"></component>
    </KeepAlive>
    <!-- 2.多个条件判断的子组件 -->
    <KeepAlive>
      <A v-if="componet == 'A'"></A>
      <B v-else></B>
    </KeepAlive>
    <!-- 3.和 Transition 动画组件一起使用 -->
    <transition>
      <KeepAlive>
        <component :kay="componet.name" :is="componet"></component>
      </KeepAlive>
    </transition>
  </div>
</template>
<script lang="ts" setup>
import { ref, shallowRef } from 'vue';
import A from '../components/HelloWorld.vue';
import B from '../components/BcomponentIs.vue';
// let componet = ref('A');
let componet = shallowRef(A);
const comp = (val: A | B): void => {
  componet.value = val;
};
</script>

二、属性 

1. include包含 、 exclude排除、max最大缓存实例数
2. KeepAlive 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组
3. 它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name
4. 可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<!-- 以英文逗号分隔的字符串 -->
<KeepAlive include="a,b">
  <component :is="componet" />
</KeepAlive>

<!-- 正则表达式 (需使用 `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="componet" />
</KeepAlive>

<!-- 数组 (需使用 `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="componet" />
</KeepAlive>
<!-- max最大缓存实例数 -->
<KeepAlive :max="10">
  <component :is="componet" />
</KeepAlive>

四、KeepAlive 的生命周期

<script setup>
    import { onActivated, onDeactivated } from 'vue'

    onActivated(() => {
      //1. 调用时机为首次挂载
      //2. 以及每次从缓存中被重新插入时
    })

    onDeactivated(() => {
      //3. 在从 DOM 上移除、进入缓存
      //4. 以及组件卸载时调用
    })
</script>