vue keep-alive 缓存不生效解决方案

一、作用

 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>