亲宝软件园·资讯

展开

keep-alive清除缓存 图文详解keep-alive怎样清除缓存

Try to do 人气:2
想了解图文详解keep-alive怎样清除缓存的相关内容吗,Try to do在本文为您仔细讲解keep-alive清除缓存的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:keep-alive清除缓存,keep总让清空缓存,keep怎么清理缓存,下面大家一起来学习吧。

开篇场景

我的项目是前后端没有分离的,技术栈是layui+vue+jq,vue是我后面引入的,为了能够更好的组件化,将页面组件化,减少代码重复量,因为jq的页面需要经常获取dom 元素,导致页面非常的冗余,jq 的页面也不好做组件化,将页面的功能抽离封装,所以我引入了vue,最近需要是实现一个需求,就是多页面缓存,通过点击左边的菜单栏,右边展示页面,但是需要将点击过的页面都进行缓存,如下图

这是我做的一个简单的例子

使用v-for直接渲染

刚开始我的想法是设计一个数组,每次点击的时候将点击的组件push到一个数组,然后通过v-for用自定义组件进行遍历;

发现点击的时候会把内容都加进去,这个时候就需要一个index,来显示当前的高亮,而且需求是每次只显示一个页面,这个时候就要通过index去隐藏其他的页面。

v-for存在问题,删除的时候会因为数组改变重新渲染

此时可以看到实现了这个功能,但是每次点击都添加很多相同的元素 这个时候我们就可以做去重的操作

通过去重简单的实现了多页面的功能

因为我的功能是需要实现多页面缓存 就是要将这些页面都缓存起来,所以我用了keep-alive这个组件,但是数组改变的时候,页面会发生重新渲染

当我操作了B 页面 我把A 页面关闭也就是删除之后B 页面就重新渲染了 这就达不到我要的缓存的效果。所以并不能直接使用v-for 直接进行渲染

我后面想到自己实现个自定义指令,自己去判断是否重新渲染, 但是自定义指令根本没有this ,拿不到实例也就拿不到vnode 也就没法自己实现缓存。

后面我想自己写个组件用jsx 语法去渲染 自己判断是否缓存,还是重新创建实例,但是 我拿到缓存渲染不上去。
之后我就想到了keep-alive这个组件,不循环直接渲染当前高亮的那个页面

直接用自定义组件渲染

这时候 可以实现缓存的功能了,自己实现一个keep-alive还是很麻烦的,自带的这个keep-alive 还是很好用的,缓存还是很强的,

keep-alve 强大的缓存存在的问题

后面我发现了一个问题, 当我在页面做了操作,关闭了之后,在重新点开的时候,页面还是有数据,只能说keep-alive的缓存太厉害了,之后我就想怎么去清除这个缓存,官网有2个api,include跟exclude,include是包含那些组件的name 才会缓存,exclude刚好相反,是包含了那些就不缓存,但是我的页面组件是之前就构建好的,是个匿名的组件

我试过加name 并不能起到效果,我在度娘上查了下怎么清除缓存的,

参考文章:https:

我就想到了 我能不能删除的时候也把它的缓存也清除了

找了好久还是让我找到了cache

这个是我简单写的例子是在 $children[0].$options.parent.cache,在我真实的项目是_vnode.chindren.componentInstance里面的第一个元素里面

最关键是这个带有keep-alive的 如果当你找到这个东西 你就能找到cache了,我之前试过写jsx,好像没找到cache这个东西,估计是没有keep-alive就没有cache,自己实现一个keep-alive还是很难的。

找到cache 可以看到它里面的key名字跟我们组件的名字有关系,可以用indexOf 去匹配然后删除cache

可以看到功能已经实现了,这样子就可以实现多页面缓存了。

不得不说 vue还是很强大的 keep-alive 还是很厉害的

总结

加载全部内容

相关教程
猜你喜欢
用户评论