图文详解keep-alive如何清除缓存

编辑: admin 分类: javascript 发布时间: 2022-01-01 来源:互联网

开篇场景

我的项目是前后端没有分离的，技术栈是layui+vue+jq,vue是我后面引入的，为了能够更好的组件化，将页面组件化，减少代码重复量，因为jq的页面需要经【文章来源：http://www.1234xp.com/mggfzq.html网络转载请说明出处】常获取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刚好相反，是包含了那些就不缓存，但是我的页面组件是之前就构建好的，是个匿名的组件