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

开篇场景

我的项目是前后端没有分离的，技术栈是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 还是很厉害的

总结