一、作用
vue 【缓存】方案，保留组件状态或避免重新渲染，能够缓存当前页面的所有数据
二、用法
与**【动态组件】**一起使用：（会缓存不活动的组件实例，而不是销毁它们）
<keep-alive>
<component :is="view"></component>
</keep-alive>
与**【vue-router】**一起用：
<keep-alive>
<router-view></router-view>
</keep-alive>
三、设置缓存条件
【include】 和 【exclude】（2.1.0新增）
逗号分隔字符串： <keep-alive include="a,b">
正则表达式 (使用 v-bind)： <keep-alive :include="/a|b/">
数组 (使用 v-bind)：<keep-alive :include="['a', 'b']">
【max】 (2.5.0新增)
数字。最多可以缓存多少组件实例：<keep-alive :max="10">
四、相关钩子函数
【activated】 和 【deactivated】
在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 树内的所有嵌套组件中触发。
keep-alive的页面：
第一次进入：created-> mounted-> activated，退出：deactivated。
再次进入，触发activated（这时我们可以拿到组件的所有data，可在此节点做一些请求更新页面数据）
五、！！！keep-alive不生效实例
订单页面A（有tab标签），点击跳转到详情页面B，当详情页B返回到订单tab列表页B时，需要保持之前的tab选中状态。
keep-alive设置
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
router设置
{
path: '/list'，
name: 'List',
component: () => import('@/views/order/list'),
meta: {keepAlive: true} // 设置页面缓存，保持tab状态
},
{
path: '/detail'，
name: 'Detail',
component: () => import('@/views/order/detail'),
meta: {keepAlive: false} // 不需要缓存
},
结果发现，订单tab列表页缓存并没有生效！！！
原因分析：
通过v-if来判断是否生成keep-alive，当列表页面A符合条件时，内存缓存了组件状态。当跳转到详情页B时，不符合条件，由于v-if是挂载到keep-alive标签上，会把之前keep-alive的列表页面A进行销毁，再次进入到A会重新创建。
正确写法：
写法一：（v-if挂载到router-view上面）
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
写法二：(使用include属性，设置需要缓存的组件)
<keep-alive include="List">
<router-view></router-view>
</keep-alive>
原文链接：https://blog.csdn.net/qq_36131788/article/details/107559632
