一、定义：

指令keep-alive时用来做组件缓存的，就是把组件缓存起来不会销毁，下次打开这个组件直接显示出来，如果把切换出去的组件保留在内存中，可以保留他的状态或避免重新渲染。一般用于有上拉加载的页面，因为如果一个页面上有上拉加载的话，用户加载了好几个页面然后点击进入详情，在返回又得重新加载，这个体验很不好，keep-alive可以把这个列表页面保存在内存中避免用户重复操作，增强用户体验。

二、是什么？

  • keep-alive是Vue.js的一个内置组件
  • 包裹动态组件时，会缓存不活动的组件实例，而不是销毁他们
  • 它本身不会渲染一个DOM元素，也不会出现在父组件中
  • 当组件在内被切换，它的activated和deactivated这两个生命周期钩子函数将会被对应执行
  • 它提供了include与exclude两个属性，允许组件有条件进行缓存

三、router配置缓存

vue2.x中，router-view可整个放入keepalive中，如下：

  1. <template>
  2.     <!-- vue2.x配置 -->
  3.    <keep-alive>
  4.     <router-view v-if="$route.meta.keepAlive" />
  5.   </keep-alive>
  6.   <router-view v-if="!$route.meta.keepAlive"/>
  7. </template>

vue3.0的App.vue配置方法如下

  1. <template>
  2.   <!-- vue3.0配置 -->
  3.   <router-view v-slot="{ Component }">
  4.     <keep-alive>
  5.       <component :is="Component"  v-if="$route.meta.keepAlive"/>
  6.     </keep-alive>
  7.     <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  8.   </router-view> 
  9. </template>

这里component是vue中的特殊组件，:is是用来绑定指定组件，这里是与路由对应的页面绑定

  • 添加meta属性

在对应的路由上添加meta属性来设置页面是否要使用缓存，如下：

  1. {
  2.   path: "/keepAliveTest",
  3.    name: "keepAliveTest",
  4.    meta: {
  5.        keepAlive: true //设置页面是否需要使用缓存
  6.    },
  7.    component: () => import("@/views/keepAliveTest/index.vue")
  8.  },

实现页面部分刷新
先了解vue的生命周期，被keepAlive包裹的组件和页面，页面进入时执行的生命周期为：created->mounted->activated;
其中created->mounted是页面第一次进入才会执行，activated生命周期在页面每次进入都会执行，特属于keepAlive的一个生命周期，所以我们把页面每次进来要进行的操作放入该生命周期即可。
如下代码：

  1. activated() {
  2.     // 页面每次进入将手机动态验证码置为空
  3.    this.$refs.mobPwdCode.inputValue = '';
  4. },

动态设置路由keepAlive属性
有些时候我们用完了keepalive缓存之后，想让页面不再保持缓存，或者设置下一个页面keepalive，也这个时候我们可以改变meta的keepAlive值来去除页面缓存，使用beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave，使用方式如下

  1. // to为即将跳转的路由，from为上一个页面路由
  2. beforeRouteLeave(to, from,+ next) {
  3.     // 设置下一个路由的 meta
  4.     to.meta.keepAlive = false;
  5.     next();
  6. }

组件配置缓存

使用场景

通常我们会对vue的一个页面进行缓存，然而有些时候我们仅需要缓存页面的某一个组件，或是在使用动态组件compnent进行组件切换时需要对组件进行缓存。

缓存页面指定组件

当用于App.vue时，所有的路由对应的页面为项目所对应的组件，使用方法如下：
在keep-alive组件上使用include或exclude属性，如下：使用include
代表将缓存name为testKA的组件，

  1. // APP.vue文件，将页面作为组件缓存
  2. <router-view v-slot="{ Component }">
  3.   <keep-alive include="testKA">
  4.     <component :is="Component"/>
  5.   </keep-alive>
  6. </router-view>

在router对应的页面中，需要设置name属性，如下：

  1. export default {
  2.     name:'testKA',// keep-alive中include属性匹配组件name
  3.     data() {return {}},
  4.     activated() {
  5.         // keepalive缓存的页面每次进入都会进行的生命周期
  6.     },
  7. }

此外，include用法还有如下：

  1. <!-- 逗号分隔字符串 -->
  2. <keep-alive include="a,b">
  3.   <component :is="view"></component>
  4. </keep-alive>
  6. <!-- 正则表达式 (使用 `v-bind`) -->
  7. <keep-alive :include="/a|b/">
  8.   <component :is="view"></component>
  9. </keep-alive>
  11. <!-- 数组 (使用 `v-bind`) -->
  12. <keep-alive :include="['a', 'b']">
  13.   <component :is="view"></component>
  14. </keep-alive>

exclude用法与include用法相同，代表不被缓存的组件。此外，keep-alive还有一个max属性，代表缓存组件最大数量，一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

  1. <keep-alive :max="10">
  2.   <component :is="view"></component>
  3. </keep-alive>

当用于某个页面进行组件切换时，用法与缓存路由相同，不过只是将页面降级为一个组件，父组件由App.vue降级为对应路由页面
在实战过程中，发现keepalive缓存组件时，不能跨级使用;，比如在App.vue中使用include属性进行name=”a”匹配时，只能匹配缓存name为a的子组件（路由页面），而不能缓存name为”a”的孙子组件（子页面引的组件）。若想缓存孙子组件，可以将整个子组件缓存，或者在子组件里再使用keepalive。
关于keepalive使用说明文档，可去官网学习：https://v3.vuejs.org/guide/component-dynamic-async.html#dynamic-components-with-keep-alive
文档：https://blog.csdn.net/m0_46309087/article/details/109403655