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 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
node.js中的path.basename方法使用说明
Dec 09 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
详解webpack的配置文件entry与output
Aug 21 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
Feb 18 Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 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
JSON在PHP中的应用介绍
2012/09/08 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
php blowfish加密解密算法
2016/07/02 PHP
Laravel如何友好的修改.env配置文件详解
2017/06/07 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
2016/08/02 Javascript
又一款js时钟!transform实现时钟效果
2016/08/15 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue读取本地的excel文件并显示在网页上方法示例
2019/05/29 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
JavaScript单线程和任务队列原理解析
2020/02/04 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
对python抓取需要登录网站数据的方法详解
2018/05/21 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
活动策划邀请函
2014/02/06 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
节约电力资源的建议书
2014/03/12 职场文书
临床专业自荐信
2014/06/22 职场文书
党员创先争优心得体会
2014/09/11 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python