vue中手动清除KeepAlive缓存

Posted 2023-05-08 RicardoX3

首先，这是vue的官方文档 KeepAlive | Vue.js (vuejs.org) 

KeepAlive组件能够保存当前组件状态，在进行路由跳转时变为【不活跃状态】而非卸载。但是官方并没有提供清除缓存的方法（除了刷新页面，整体重建）

 

 假设以下是我们路由&对应组件的代码

<router-view v-slot="Component">
              <KeepAlive :include="keepArr">
                <component :is="Component"/>
              </KeepAlive>
            </router-view>

需要注意的是，keepalive如果不绑定【缓存数组】的话，将会默认缓存所有组件，这将会占用较大内存；

可以考虑使用"max"属性， 即 :max="number" ，当缓存组件数量超过设定的number个数时，会自动销毁最先进入缓存的组件；

但是这样不太方便，所以这里使用 include 属性，绑定缓存组件名数组。

该数组为动态引用，所以请勿在data中定义，而是要computed中作为计算属性绑定其他动态变化值。

 

以我的项目为例，大致结构如下

<div>
    <el-tabs ……>
        <el-tab-pane>……</el-tab-pane>
    </el-tabs>
    <router-view v-slot="Component">
        <KeepAlive :include="keepArr">
            <component :is="Component"/>
        </KeepAlive>
    </router-view>    
</div>

点击相应菜单时，新增对应的tab标签（若是已有则切换过去）然后跳到对应路由下的组件。

在已激活的tab间切换时自然是保留着缓存，当关闭标签页时，清除当前组件缓存（或者你可以自定义触发方式，只要能获取到需要清除组件的组件名 "name"）

 

 showTabs是已激活的tab数组，内部存储的有当前tab对应的路由，组件名，以及tab自身的标签名等。

  computed: 
    keepArr() 
      let temp = this.showTabs.map(item => 
        return item.name
      )
      return [...temp]
    
  ,

为了确保该缓存能够正确生效，请在路由中确保该组件的’name‘与组件内的属性’name‘相同，否则将无法识别需要缓存的组件

 

keepAlive动态缓存及清除缓存

参考技术A 1.在使用keepAlive缓存是发现遇到的坑，现有A-B-C三个页面（A首页，B列表页，C详情页），从A到B刷新，C退回到B不刷新，这里是使用的结合router来实现的。
2.最开始的做法在app里面

在router路由里面设置需要缓存的组件的keepAlive:true

3.从A进入到B页面时设置B页面的meta.keepAlive==flase，让B页面刷新。

4.从C页面返回的B时设置B的meta.keepAlive==true,让B页面缓存(不刷新)

5.后面发现这样有一个问题，首次A进入B时B的keepAlive为false进入C页面时B的keepAlive为true，所以首次C退回到B时，B页面也会刷新。
导致的原因是因为当引入keep-alive 的时候它的值为true时，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。所以会导致C第一次进入B的时候会刷新。

修改A页面的beforeRouteLeave替换为beforeRouteEnter当B进入A的时候修改B的keepAlive，这样的话，首次A进入B的时候keepAlive为true，执行created-> mounted-> activated，C首次退回的时候就不会刷新了。