数字化管理平台

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

权限系统-商城

个人博客地址

一、基本用法

有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到组件。

开启生命周期的变化

初次进入时： onMounted> onActivated

退出后触发 deactivated

再次进入：只会触发 onActivated

 import { ref,shallowRef } from 'vue'  import CompA from './CompA.vue'  import CompB from './CompB.vue'   const current = shallowRef(CompA)   let num = ref(10); " _ue_custom_node_="true">   A B

注：事件挂载的方法等，只执行一次的放在 onMounted中；组件每次进去执行的方法放在 onActivated中

二、include包含 / exclude排除

默认会缓存内部的所有组件实例，但我们可以通过 include 和 exclude prop 来定制该行为。这两个 prop 的值都可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组：

它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项（v3.2.34之前的版本或选项式API）。

注：在 3.2.34 或以上的版本中，使用

onActivated 在组件挂载时也会调用，并且 onDeactivated 在组件卸载时也会调用。这两个钩子不仅适用于  缓存的根组件，也适用于缓存树中的后代组件。