Vue之keep-alive灵活清除页面缓存

引言

对于使用过Vue.js开发过网页的小伙伴，对于keep-alive那可是熟透了，但是对于刚入门的小白，咱还是稍微介绍一下。

---

keep-alive主要用于保留组件状态或避免重新渲染，而不是销毁它们，它的最大好处还是当我们在组件之间来回切换的时候，它可以很好的避免反复渲染带来的性能问题，就比如经常的tabs标签切换，用户可能会高频切换，并且在返回还想保留之前所做的操作，那么我们的keep-alive就可以派上很大的用场了。

具体使用参照vue.js官网 keep-alive使用

想想

说到这里，我想问一下大家keep-alive怎么样做到灵活使用呢？

场景

举个例子：移动端H5项目，订单列表页面，有分页，当我们滑动的时候，就会加载相应的数据，当我们前往了订单详情页面，再从订单详情返回订单列表，这时产品需要让我们前端的小伙伴做到在返回后，需要保持上次加载的数据以及滑动的位置，这个时候就会有聪明的同学说keep-alive，没错，就是它，很棒的。。。

大家有没有想过使用keep-alive会存在这样的问题，当其他页面过来都会缓存，也就是不会执行组件的mounted生命周期钩子，那这就麻烦大了，我们的很多初始化的东西都写在这个钩子里。
哈哈，莫慌，莫慌，办法都是人想出来的嘛，这不，下面就教大家三种解决方法

解决

1、运用activated生命周期钩子（vue官方提供的）
初始化的内容都写在activated钩子里，这个时候不管去哪个页面，再回到当前页面，数据都会更新，因为之前隐藏的组件，这时被激活了，但是组件的状态还是上次的，其实组件的消失和隐藏，跟v-show有点像，并不是销毁

2、手动操作keep-alive
看过vue源码的同学，会发现keep-alive实现会将组件存放在caches数组当中，这个时候我们对数组进行操作，这个时候，就可以做到前往其他页面的时候，该缓存还是不该缓存，这样就可以达到灵活使用
参考源码片段

下面给大家提供手动清除缓存的方法

removeKeepAliveCacheForVueInstance(vueInstance) {
    let key =
        vueInstance.$vnode.key ??
        vueInstance.$vnode.componentOptions.Ctor.cid + (vueInstance.$vnode.componentOptions.tag ? `::${vueInstance.$vnode.componentOptions.tag}` : "");
    let cache = vueInstance.$vnode.parent.componentInstance.cache;
    let keys = vueInstance.$vnode.parent.componentInstance.keys;
    if (cache[key]) {
        vueInstance.$destroy();
        delete cache[key];
        let index = keys.indexOf(key);
        if (index > -1) {
            keys.splice(index, 1);
        }
    }
}

主要核心是通过vueInstance.$vnode.parent.componentInstance获取到keep-alive实例，清除cache的同时，destory当前实例

3、动态控制include
当我们进行页面切换的时候，页面前进，给params带上push标记，后退，就给params带上pop标记。
这时在App.vue，监听路由的变化，来动态控制include，如果to.params.cachesType为push标记，则需要缓存，否则不需要。

watch: {
    $route(to) {
        // 如果涉及到同一页面的push操作，需要去重后插入
        if (to.params.cachesType == "push") {
            this.include.push(to.name);
        } else {
            this.include.pop();
        }
        // 处理tabbar需要清栈的情况
        if (to.params.clearRoute) {
            this.include = ["Index"];
        }
    },
},

总结

到这里本次的记录就快结束了，简单说一下这三种方法的区别吧
方法一：是vue官方提供的，虽然好用，但是他的缺点是不能够灵活缓存。
方法二：操作起来比较直接，但写起来比较烦，优点嘛，就是很灵活，配合导航守卫beforeRouteLeave（离开该页面时触发的守卫），在前往页面前，如果需要清除缓存，则进行调用removeKeepAliveCacheForVueInstance方法即可，可应对浏览器刷新存在的问题。
方法三：一般用于移动端H5，自己维护页面栈，但是如果有刷新，会导致页面栈异常，从而导致include的内容出现问题。

最后提醒一下大家，不要太喜欢 keep-alive了，毕竟人家也会害羞的哦！！

在公司大佬的指点下，有所感悟，所以写下本篇文章，希望可以帮到大家
有兴趣的同学可以关注大佬

大家一起进步，互相学习！！！