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


Posted in Javascript onMarch 21, 2019

问题产生的背景

我们一个后台,在切换一些标签页的时候,是使用的 keep-alive 缓存的标签页,也使用了 include 属性来决定哪个页面进行缓存,而标签页的切换实际上是路由的切换,也就是说打开一个新标签页的时候,url 会跟着变化,老的标签页如果在 keep-aliveinclude 范围内那就会缓存下来。

然后客服人员就反馈页面开的久了就会崩溃,因为他们基础上不会刷新页面(工作需要),又总有切换标签的习惯,最后导致内存越来越大最后崩溃。

依赖环境

这个项目是基于一个开源 vue 后台框架:https://github.com/PanJiaChen/vue-element-admin,然后代码一直由几个后端开发维护的!所以后端没找出问题在哪,然后就我来接手这个问题了。
写文章时,标签里竟然没有 vue 这一项,差评!

定位问题

先梳理下业务逻辑:从业务场景来说,我们在标签页之间切换时,如果刚进入的这个标签页已被缓存了,那被缓存的标签页就直接拿出来展示就行,而关闭这个标签页的时候就应该销毁对应的组件。

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

花了点时间查看了一下代码,发现问题在于关闭标签页的时候,虽然这个页面没在 keep-aliveinclude 里了,但是组件也没有被销毁掉,还是在缓存状态,我们可以通过 Vue Devtools 插件看到关闭后的标签页对应的组件一直还存在着:

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

当然,在这块 keep-alive 本身的逻辑我觉得是没问题的,主要是我们项目比较复杂,缓存的组件太多了而且会一直增加,所以最终导致崩溃。

解决问题

既然问题已经定位了,那就好解决问题了,只需要在关闭标签页的时候把对应的组件也销毁掉就好了。

经过网上一翻查找,发现销毁一个组件可以使用: this.$destroy(‘组件名') 来销毁。

先说下大概思路:keep-aliveinclude 里存的其实是一个 vuex 中的一个数据源(数据源保存的是路由名称),当关闭标签页时,这个数据源中的一项会被移除。这之前,我们在组件里监听到这个数据源的变化,如果此组件对应的路由(这个路由应在 mounted 的时候保存下来)已经不在数据源中了,那就应该销毁此组件。

代码大概如下:

const mixin = {
 data() {
  return {
   routePath: ''
  }
 },
 mounted() {
  this.routePath = this.$route.path
 },
 computed: {
  visitedViews() {
   return this.$store.state.tagsView.visitedViews
  }
 },
 watch: {
  visitedViews(value) {
   if(value 里没有了 routePath 这一项)
    this.$destroy(this.$options.name)
   }
  }
 }
}

export default mixin

这一段代码单独拎出来了,然后在需要缓存的组件里使用 mixins 混入到组件对象中,这样组件中要添加的代码量就比较少了。

更改后经过测试,关闭标签页后对应的组件就会被销毁掉,使用 Vue Devtools 能看的很清楚。

更多思考

在我们后台操作这么频繁的业务场景下,使用 keep-alive 其实并不是一个好的选择。

在我们修复这个问题后,我们通过控制台里的 Memory 查看页面内存的变化时,发现组件即便被销毁,也要经过一段时间才能回收完,当我们在这一段时间一直创建/打开新的标签页时,内存还是会在短时间内高涨。而且有时候,内存在经过一段时间后也并没有回收掉。

keep-alive 本质上是把整个 dom 节点及对应的事件等都缓存下来了,当这样的组件很多的时候,自然会占用很多内存。而如果我们只缓存这个组件中的数据,在需要这个组件再次显示的时候再临时渲染那肯定要节省很多内存的,毕竟数据占的空间其实很小的,而渲染组件要花的时间也不会很长(只要组件不是特别特别复杂)。

所以,下一阶段的优化工作就是把 keep-alive 去掉,然后使用 vuex 来缓存组件中的数据,当需要重新显示数据时再把数据取出来并重新渲染。当然,这是一个比较大的工程!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
js自定义select下拉框美化特效
May 12 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
基于node简单实现RSA加解密的方法步骤
Mar 21 #Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 #Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 #Javascript
详解JS取出两个数组中的不同或相同元素
Mar 20 #Javascript
详解vue中axios的使用与封装
Mar 20 #Javascript
javascript数组去重方法总结(推荐)
Mar 20 #Javascript
浅谈JavaScript面向对象--继承
Mar 20 #Javascript
You might like
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
基于PHP实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
WordPress中给文章添加自定义字段及后台编辑功能区域
2015/12/19 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
JavaScript面向对象之体会[总结]
2008/11/13 Javascript
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
简单的Jquery全选功能
2013/11/07 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python 字符串换行的多种方式
2018/09/06 Python
pandas修改DataFrame列名的实现方法
2019/02/22 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
大学自荐信
2013/12/12 职场文书
党的群众路线教育实践活动宣传方案
2014/02/23 职场文书
态度决定一切演讲稿
2014/05/20 职场文书
父亲节寄语大全
2015/02/27 职场文书
中国合伙人观后感
2015/06/02 职场文书
承诺书怎么写 ?
2019/04/16 职场文书
Spring Boot项目如何优雅实现Excel导入与导出功能
2022/06/10 Java/Android
在SQL Server中使用 Try Catch 处理异常的示例详解
2022/07/15 SQL Server