【Vue3第二十二章】KeepAlive缓存组件

Vue3 + Vite + VueRouter + Pinia + Axios + Element Plus + 项目实战（持续更新中…）

一、基本用法

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

开启生命周期的变化

• 初次进入时： onMounted> onActivated
• 退出后触发 deactivated
• 再次进入：只会触发 onActivated

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

二、include包含 / exclude排除

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

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

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

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