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

目录
  • 开篇场景
  • 使用v-for直接渲染
  • 直接用自定义组件渲染
  • keep-alve 强大的缓存存在的问题
  • 总结

开篇场景

我的项目是前后端没有分离的，技术栈是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://www.jb51.net/article/219189.htm

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

找了好久还是让我找到了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 还是很厉害的

总结

到此这篇关于keep-alive如何清除缓存的文章就介绍到这了,更多相关keep-alive清除缓存内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue里如何主动销毁keep-alive缓存的组件

    问题产生的背景 我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-alive 的 include 范围内那就会缓存下来. 然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃. 依赖环境 这个项目是基于一个开源 vue

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • vue项目优化之通过keep-alive数据缓存的方法

    <keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM. <keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. prop: include: 字符串或正则表达式.只有匹配的组件会被缓存. exclude: 字符串或正则表达式.任何匹配的组件都不会被缓

  • vue 使某个组件不被 keep-alive 缓存的方法

    提出问题 最近在做项目发现一个问题,当我使用了 keep-alive 标签后,进入了某个路由进行一系列操作,再点击浏览器后退,再次进入刚才的路由,页面被操作的数据没有初始化! 分析问题 这是因为 keep-alive 将路由页面缓存,所以该路由没有完成整个生命周期,没有 destroyed,因此重新进入也没有触发其他生命周期钩子,如 created 等. 解决问题 (1). 查看官方文档 当组件在 keep-alive 内被切换,它的 activated 和 deactivated 这两个生命周

  • 基于vue中keep-alive缓存问题的解决方法

    vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染. 但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id 这时候可以使用vue的$destroy()方法 这是vue的一个生命周期,完全销毁一个实例.清理它与其它实例的连接,解绑它的全部指令及事件监听器. 不用

  • vue使用keep-alive实现数据缓存不刷新

    到现在,接触vue也小段时间了,项目进行到了一定程度,然而项目缺少了缓存机制,所以每次跳转页面都会重新created一下数据,虽说系统的数据请求速度很快,但是这样做对系统的性能会有很大的坏处的,所以到这里就要对系统优化下,添加缓存了. 其实到现在,对于vue还是没有玩通,每深挖一次,就会发现一次vue的精彩,开始不清楚要用什么实现缓存,找了好久,有好几种说法,就是用vuex.vuet或者keep-alive,然后对比了一下,在我认为,vuex和vuet是实现状态管理,重心是在数据处理上:想要实现

  • vue2使用keep-alive缓存多层列表页的方法

    vue关于列表页和详情页的展现比较让人头疼,在列表页面点击进详情页返回以后,列表页会重新刷新.假如在第五页找到的数据,点击修改后返回又跳回第一页了,这个时候就需要用到keep-alive缓存页面数据,但keep-alive缓存的页面一直不会发生改变,特别是列表页层级很多的情况下,更加复杂. 譬如我后台的一个管理页面,因为数据关联很复杂,所以做了三层列表页嵌套,上一层点击管理就可以进行下一层的数据展现,每一层列表页都包含了3到4个需要循环展现的数据.在加入keep-alive之前我使用路由和自定义

  • 详解keep-alive + vuex 让缓存的页面灵活起来

    详解keep-alive + vuex 让缓存的页面灵活起来

    引入 在使用vue + vue-router开发SPA的时候,有没有遇到过这样的情况:当我们在列表页和详情页之间切换的时候,如果列表页不做缓存,会导致每次从详情页返回时,列表页都会重新加载.如下图: 细心的朋友已经发现了,当从详情页返回列表页的时候,列表页重载了,这样的体验显然不好,这时我们可以对列表页进行缓存处理. keep-alive实现页面缓存 我们的项目不一定所有页面都需要做缓存处理,所以这里介绍两种按需缓存的方法: 方法一: 首先在定义路由的时候配置 meta 字段,自定义一个Keep

  • keep-alive不能缓存多层级路由菜单问题解决

    这出现的原因是多级路由导致的,就是router-view嵌套 在层级不同的router-view中切换tag会出现缓存数据失效的问题.目前keep-alive可以有效缓存一级,二级的路由菜单,3级以上菜单并不能做到缓存,这里提供一个解决方案: 在cachedViews中手动加上一级菜单和三级菜单之间,缺失的二级菜单的名字,这样二级菜单下的组件就会缓存了 实列代码如下: const _import = require('@/router/_import_prodection');//获取组件的方法

  • vue中keep-alive，include的缓存问题

    前提:有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面),B是订单列表页,C是订单详情页,D是费用详情页 需求:顺序是A->B->C->D,每次都刷新页面,D->C->B时走缓存,但是每次从A到B都要刷新B页面,从B到C需要刷新C页面,从C到D要刷新D页面 在vue官方文档2.1以上有include 和 exclude 属性允许组件有条件地缓存.在这里主要用include结合vuex来实现(四个页面组件都有自己的name才会生效,这里name就叫A,B,C,D) 从D

随机推荐