解决vue自定义指令导致的内存泄漏问题


Posted in Javascript onAugust 04, 2020

vue的自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题。

看下面代码:

directives: {
  scroll: {
  inserted (el, cb) {
   // 不是元素节点 || 未设置回调函数
   if (el.nodeType !== 1 || !cb) return
   let direct = 'down'
   let rollHeight = 0

   let getScrollEventTarget = (target) => {
   while (target.nodeType === 1 && target.tagName !== 'BODY' && el.tagName !== 'HTML') {
    var overflowY = getComputedStyle(target).overflowY
    if (overflowY === 'scroll' || overflowY === 'auto') {
    return target
    }
    target = target.parentNode
   }
   return window
   }

   let targetNode = getScrollEventTarget(el)

   let scrollListener = () => {
   if (targetNode.scrollTop > rollHeight) {
    direct = 'down'
   } else {
    direct = 'up'
   }
   rollHeight = targetNode.scrollTop
   cb.value(rollHeight, direct)
   }

   el.unbindEventListener = () => {
   targetNode.removeEventListener('scroll', scrollListener)
   }
   targetNode.addEventListener('scroll', scrollListener)
  },
   // unbind (el) {
   // if (el.unbindEventListener) {
   // el.unbindEventListener()
   // }
  // }
  }
 }

起初,我忘记了些注释的unbind方法,导致出现了内存泄漏,给元素绑定的scroll方法,会一直存在内存里。

导致出的情况,就是比如我进了页面滚动到第3页,出去,再点一个页面,当滚动到第4页时,将会请求2次,一次是上个页面的第4页,一次是本次页面的第4页,当你退出,再进一个页面,当滚动到第5页时,将会请求3次(上上页,上页和本页),这就是典型的事件未解绑导致的内存泄漏。

所以需要给元素解绑,好在vue指令提供了unbind钩子函数,

但是这里依然有个技术巧点就是:

1、我们scroll的元素可能是绑定的元素的父级等等,需要一层一层往上找

2、就是解绑的时候我们也需要找到那个父级元素等等,然后还需要remove对应的方法,那么肯定不可能在unbind里再写一次,所以就可以在insert钩子函数里,给el绑定一个解绑事件el.unbindEventListener,在unbind钩子函数里直接调用即可。

以上这篇解决vue自定义指令导致的内存泄漏问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用Javascript和DOM Interfaces来处理HTML
Oct 09 Javascript
JS backgroundImage控制
May 19 Javascript
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
JS实现霓虹灯文字效果的方法
Aug 06 Javascript
基于bootstrap风格的弹框插件
Dec 28 Javascript
ReactNative列表ListView的用法
Aug 02 Javascript
javascript中神奇的 Date对象小结
Oct 12 Javascript
React Router v4 入坑指南(小结)
Apr 08 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
Jul 19 Javascript
Vue实现跑马灯样式文字横向滚动
Nov 23 Vue.js
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
详解JS深拷贝与浅拷贝
Aug 04 #Javascript
vue addRoutes路由动态加载操作
Aug 04 #Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 #Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 #Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 #Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 #Javascript
You might like
用PHP创建PDF中文文档
2006/10/09 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
jquery中load方法的用法及注意事项说明
2014/02/22 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
2016/03/30 Javascript
jquery编写日期选择器
2017/03/16 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
小程序云函数调用API接口的方法
2019/05/17 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
JavaScript布尔运算符原理使用解析
2020/05/06 Javascript
Python常见文件操作的函数示例代码
2011/11/15 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 问题
2018/09/27 Python
pyspark操作MongoDB的方法步骤
2019/01/04 Python
Python对象转换为json的方法步骤
2019/04/25 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python如何实现DES加密
2020/09/21 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
女性时尚网购:Chic Me
2019/07/30 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
幼师自荐信范文
2013/10/06 职场文书
会展中心部门工作职责
2013/11/27 职场文书
春节活动策划方案
2014/01/24 职场文书
赔偿协议书范本
2014/09/12 职场文书
工伤事故赔偿协议书(标准)
2014/09/29 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
广告策划的实习心得体会总结!
2019/07/22 职场文书
golang用type-switch判断interface的实际存储类型
2022/04/14 Golang