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自定义指令导致的内存泄漏问题解决的更多相关文章

  1. vue自定义指令,比onerror更优雅的方式实现当图片加载失败时使用默认图,提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  2. vue自定义指令要点

    vue自定义指令的基础使用这里就不阐述,看官网文档:https://cn.vuejs.org/v2/guide/custom-directive.html 本文用一个实例描述自定义指令的要点,自定义一 ...

  3. vue自定义指令

    Vue自定义指令: Vue.directive('myDr', function (el, binding) { el.onclick =function(){ binding.value(); } ...

  4. vue 自定义指令的使用案例

    参考资料: 1. vue 自定义指令: 2. vue 自定义指令实现 v-loading: v-loading,是 element-ui 组件库中的一个用于数据加载过程中的过渡动画指令,项目中也很少需 ...

  5. vue自定义指令(Directive中的clickoutside.js)的理解

    阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...

  6. 使用block的时候,导致的内存泄漏

    明确,只要在block里边用到我们自己的东西,成员变量,self之类的,我们都需要将其拿出来,把它做成弱指针以便之后进行释放. 在ZPShareViewController这个控制器中,由如下代码: ...

  7. Vue自定义指令报错:Failed to resolve directive: xxx

    Vue自定义指令报错 Failed to resolve directive: modle 这个报错有2个原因: 1.指令单词拼错 2.Vue.directive() 这个方法没有写在 new Vue ...

  8. 精华阅读第 13 期 |常见的八种导致 APP 内存泄漏的问题

    本期是移动开发精英俱乐部的第13期文章,都是以技术为主,所以这里就不过多的进行赘述了,我们直接看干货内容吧!本文系ITOM管理平台OneAPM整理. 实际项目中的MVVM(积木)模式–序章 导读:开篇 ...

  9. 在Activity中使用Thread导致的内存泄漏

    https://github.com/bboyfeiyu/android-tech-frontier/tree/master/issue-7/%E5%9C%A8Activity%E4%B8%AD%E4 ...

随机推荐

  1. Laravel - Method [xxx] does not exist on [xxx]

    The controller is existing, and the method 'test' exist on 'App\Http\Controllers\Admin\IndexControll ...

  2. Docker 0x03:Install Docker

    目录 Install Docker Centos yum 安装 运行docker-daemon并开机自启动 运行hello-world应用docker容器中 Ubn Install Docker do ...

  3. H3C FAT AP

  4. centos源码编译安装新版本内核

      在工作中,很多时候由于需要使用新的技术方案,需要较新版本的内核来支持新的功能,而centos系统自带的内核版本普遍都比较旧,因此我们需要对系统的内核进行升级,安装新版的内核.本文以centos7系 ...

  5. 服务器安装python3环境

    服务器安装python3环境 先安装相关包 yum install zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel re ...

  6. 使用kubeadm安装Kubernetes 1.15.3 并开启 ipvs

    一.安装前准备 机器列表 主机名 IP node-1(master) 1.1.1.101 node-2(node) 1.1.1.102 node-3(node) 1.1.1.103 设置时区 cp / ...

  7. jenkins发布PHP代码(三)

    一.先检查是否安装Git plugin和Publish Over SSH插件 系统管理-->插件管理-->已安装插件-->搜索Git plugin和Publish Over SSH ...

  8. Jmeter连接MYSQL数据库,并进行数据库的操作;

    1.在操作jmeter连接mysql数据库之前,我们需要到网上下载一个jar包.并且添加到测试计划里:mysql-connector-java-5.1.13-bin.jar;把这个jar放到jmete ...

  9. python应用-彩票随机码的输出

    """ 双色球-6个红色球(1-33)和一个蓝色球(1-16) """ from random import randint def sel ...

  10. JUnit 5.x 知识点

    出处:https://blinkfox.github.io/2018/11/15/hou-duan/java/dan-yuan-ce-shi-zhi-nan/#toc-heading-14 表面上来看 ...