解决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 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
简单的js表格操作
Sep 24 Javascript
微信小程序 登录实例详解
Jan 16 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
May 08 Javascript
详解angularjs跨页面传参遇到的一些问题
Nov 01 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 Javascript
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实现更新中间关联表数据的两种方法
2014/09/01 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
DHTML Slide Show script图片轮换
2008/03/03 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
2016/06/27 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
2017/09/19 Javascript
React Native模块之Permissions权限申请的实例相机
2017/09/28 Javascript
vue devtools的安装与使用教程
2018/08/08 Javascript
vue2.0 + ele的循环表单及验证字段方法
2018/09/18 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Python 装饰器使用详解
2017/07/29 Python
python 美化输出信息的实例
2018/10/15 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python ssh 执行shell命令的示例
2020/09/29 Python
广告学专业推荐信范文
2013/11/23 职场文书
广告业务员岗位职责
2014/02/06 职场文书
升旗仪式主持词
2014/03/19 职场文书
劲霸男装广告词改编版
2014/03/21 职场文书
安全生产管理责任书
2014/04/16 职场文书
学生党员一帮一活动总结
2014/07/08 职场文书
新教师培训心得体会
2014/09/02 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
群众路线学习笔记范文
2014/11/06 职场文书
个人创业事迹材料
2014/12/30 职场文书
商超业务员岗位职责
2015/02/13 职场文书
简爱电影观后感
2015/06/10 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server