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 拼图游戏 面向对象,注释完整。
Jun 18 Javascript
js 加载并解析XML字符串的代码
Dec 13 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
seajs中模块的解析规则详解和模块使用总结
Mar 12 Javascript
让IE8浏览器支持function.bind()方法
Oct 16 Javascript
js中利用cookie实现记住密码功能
Aug 20 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 Javascript
vuex与组件联合使用的方法
May 10 Javascript
js实现购物车功能
Jun 12 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
May 05 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
基于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将数据库导出成excel的方法
2010/05/07 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
用javascript实现自定义标签
2007/05/08 Javascript
javascipt匹配单行和多行注释的正则表达式
2013/11/20 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
微信小程序 表单Form实例详解(附源码)
2016/12/22 Javascript
nodejs6下使用koa2框架实例
2017/05/18 NodeJs
AngularJS实现tab选项卡的方法详解
2017/07/05 Javascript
React Native 环境搭建的教程
2017/08/19 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
redux-saga 初识和使用
2018/03/10 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
js实现简单的无缝轮播效果
2020/09/05 Javascript
python读取json文件并将数据插入到mongodb的方法
2015/03/23 Python
简述Python中的进程、线程、协程
2016/03/18 Python
最大K个数问题的Python版解法总结
2016/06/16 Python
python利用正则表达式排除集合中字符的功能示例
2017/10/10 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python中的tcp示例详解
2018/12/09 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Django异步任务之Celery的基本使用
2019/03/23 Python
python中自带的三个装饰器的实现
2019/11/08 Python
Python爬取你好李焕英豆瓣短评生成词云的示例代码
2021/02/24 Python
《动手做做看》教学反思
2014/04/09 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
毕业证委托书范文
2014/09/26 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
2015新学期家长寄语
2015/02/26 职场文书
小学国庆节活动总结
2015/03/23 职场文书
暑期家教宣传单
2015/07/14 职场文书
关于感恩的作文
2019/08/26 职场文书
Python 居然可以在 Excel 中画画你知道吗
2022/02/15 Python
MySQ InnoDB和MyISAM存储引擎介绍
2022/04/26 MySQL
Python时间操作之pytz模块使用详解
2022/06/14 Python