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

·  阅读 2341

引言

对于使用过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了,毕竟人家也会害羞的哦!!

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

大家一起进步,互相学习!!!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改