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 为label标签和div标签赋值的方法
Aug 08 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
Feb 27 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
Jun 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
canvas 实现中国象棋
Feb 17 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
JS实现标签滚动切换效果
Dec 25 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
微信小程序图表插件wx-charts用法实例详解
May 20 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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常用的排序和查找算法
2015/08/06 PHP
php中序列化与反序列化详解
2017/02/13 PHP
PHP基于socket实现的简单客户端和服务端通讯功能示例
2017/07/10 PHP
Jquery 扩展方法
2010/05/06 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
JavaScript编程的单例设计模讲解
2015/11/10 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
详解nodejs微信公众号开发——2.自动回复
2017/04/10 NodeJs
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
Angularjs上传图片实例详解
2017/08/06 Javascript
Vuex提升学习篇
2018/01/11 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
python3中set(集合)的语法总结分享
2017/03/24 Python
python 上下文管理器使用方法小结
2017/10/10 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python 实现读取一个excel多个sheet表并合并的方法
2019/02/12 Python
python开启debug模式的方法
2019/06/27 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
pandas中ix的使用详细讲解
2020/03/09 Python
Python标准库:内置函数max(iterable, *[, key, default])说明
2020/04/25 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
PHP开发的一般流程
2013/08/13 面试题
大学生水文观测实习自我鉴定
2013/09/29 职场文书
市场总经理岗位职责
2014/04/11 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
数学教研活动总结
2014/07/02 职场文书
教师政风行风评议心得体会
2014/10/21 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
电工生产实习心得体会
2016/01/22 职场文书
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫