Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
一、基本用法
有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到 <KeepAlive> 组件。
开启<KeepAlive>生命周期的变化
初次进入时： onMounted> onActivated
退出后触发 deactivated
再次进入：只会触发 onActivated
<script setup> import { ref,shallowRef } from 'vue' import CompA from './CompA.vue' import CompB from './CompB.vue' const current = shallowRef(CompA) let num = ref(10); </script> <template> <div class="demo"> <label><input type="radio" v-model="current" :value="CompA" /> A</label> <label><input type="radio" v-model="current" :value="CompB" /> B</label> <KeepAlive> <!-- 动态组件绑定 is 属性切换 --> <component :is="current"></component> </KeepAlive> <keep-alive> <!-- 多个条件判断的子组件 --> <comp-a v-if="num > 1"></comp-a> <comp-b v-else></comp-b> </keep-alive> <!-- 和 Transition 动画组件一起使用 --> <transition> <keep-alive> <component :is="current"></component> </keep-alive> </transition> </div> </template>
注：事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中
二、include包含 / exclude排除
<KeepAlive> 默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：
<!-- 以英文逗号分隔的字符串 --> <KeepAlive include="a,b"> <component :is="view" /> </KeepAlive> <!-- 正则表达式 (需使用 `v-bind`) --> <KeepAlive :include="/a|b/"> <component :is="view" /> </KeepAlive> <!-- 数组 (需使用 `v-bind`) --> <KeepAlive :include="['a', 'b']"> <component :is="view" /> </KeepAlive>
它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项（v3.2.34之前的版本或选项式API）。
注：在 3.2.34 或以上的版本中，使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项，无需再手动声明。
三、max最大缓存实例数
可以通过传入 max prop 来限制可被缓存的最大组件实例数。<KeepAlive> 的行为在指定了 max 后类似一个 LRU 缓存：如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。
<KeepAlive :max="10"> <component :is="activeComponent" /> </KeepAlive>
四、缓存实例的生命周期
当一个组件实例从 DOM 上移除但因为被 <KeepAlive> 缓存而仍作为组件树的一部分时，它将变为不活跃状态而不是被卸载。当一个组件实例作为缓存树的一部分插入到 DOM 中时，它将重新被激活。
一个持续存在的组件可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子。
<script setup> import { onActivated, onDeactivated } from 'vue' onActivated(() => { // 调用时机为首次挂载 // 以及每次从缓存中被重新插入时 }) onDeactivated(() => { // 在从 DOM 上移除、进入缓存 // 以及组件卸载时调用 }) </script>
onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。这两个钩子不仅适用于 <KeepAlive> 缓存的根组件，也适用于缓存树中的后代组件。
