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

2024-12-08 01:45:50

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自定义指令导致的内存泄漏问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Vue 自定义指令功能完整实例

本文实例讲述了Vue 自定义指令功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义指令</title> <script type="text/javascript" src="https://cdn.bootcss.com/v
Vue Router 实现动态路由和常见问题及解决方法

个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现
vue自定义指令用法经典实例小结

本文实例总结了vue自定义指令用法.分享给大家供大家参考,具体如下: 自定义指令: 一.属性: Vue.directive(指令名称,function(参数){ this.el -> 原生DOM元素 }); <div v-red="参数"></div> 指令名称: v-red -> red * 注意: 必须以 v-开头拖拽: 二.自定义元素指令:(用处不大) Vue.elementDirective('zns-red',{ bind:f
详解vantUI框架在vue项目中的应用踩坑

1.订单提交地址等组件的应用. 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块: <van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default show-searc
解决vue自定义指令导致的内存泄漏问题

vue的自定义指令是一个比较容易引起内存泄漏的地方,原因就在于指令通常给元素绑定了事件,但是如果忘记了解绑,就会产生内存泄漏的问题. 看下面代码: directives: { scroll: { inserted (el, cb) { // 不是元素节点 || 未设置回调函数 if (el.nodeType !== 1 || !cb) return let direct = 'down' let rollHeight = 0 let getScrollEventTarget = (target)
解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

目录使用百度地图BMapGL内存泄漏 Out of Memory 解决 1.对象不定义在data中 2.在vue中组件使用 v-if 指令会从dom中移除总结使用百度地图BMapGL内存泄漏 Out of Memory 在项目中使用了ElementUI 的 drawer 组件有地图操作并开启了 :destroy-on-close=“true” . 开关多次以后浏览器崩溃了. 刷新页面,打开任务管理器,复现刚刚的操作,会发现浏览器的内存占用一直在增加解决 1.对象不定义在data中
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题

功能描述: 如图,右侧悬浮菜单按钮,只支持上下方向拖动,点击时展开或关闭菜单. BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup =>onclick,意味着在click事件执行时会与与其相关的mouse事件冲突. 解决方案: 因为click事件执行时间短,所以利用鼠标拖动的时间差作为标志,在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的
vue自定义指令限制输入框输入值的步骤与完整代码

需求前端开发过程中,经常遇到表单校验的需求,比如校验用户输入框的内容,限制用户只能输入数字. 本文内容基于 element-ui,el-form 组件可以绑定 model.rule 用于表单内容校验,但如果有多个表单多个输入框那就得写很多个 rule,虽然方法可以通用可是使用起来也是比较繁琐的,可通过自定义执行实现一次注册,多次使用. Vue 自定义指令我们使用 el-input 作为表单的输入框 1. 先注册一个自定义指令 import Vue from 'vue'; Vue.direct
vue自定义指令实现元素滑动移动端适配及边界处理

目录效果演示核心属性实现思路代码注意自定义指令this指向问题滑动后点击事件被触发移动端滑动问题效果演示核心属性 Element.clientWidth:元素可视宽度. Element.clientHeight:元素可视高度. MouseEvent.clientX:鼠标相对于浏览器左上顶点的水平坐标. MouseEvent.clientY:鼠标相对于浏览器左上顶点的垂直坐标. Touch.clientX:触点相对于浏览器左上顶点的水平坐标(移动端属性). Touch.clie
使用Vue自定义指令实现Select组件

本篇文章教大家写一个非常简单的Select组件,想必很多人都写过Select,毕竟它太常用了,但是本篇文章的示例使用到了Vue的自定义指令,如果你对Vue自定义指令不怎么熟悉的话,本篇文章或许会让您有所收获! 完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="inner"> <div class="inputWrapper&qu
vue自定义指令实现仅支持输入数字和浮点型的示例

再开始本篇的讨论之前,先思考几个问题: 使用html元素属性type='number'是否可以满足要求 Vue中指令一般被设计用来操作dom元素的,而vue视图是基于数据模型的,如何在操作dom的同时,同时更新数据你定义的指令不能只能在input元素上使用,还要支持在其父元素上使用,自定义组件及第三方组件上使用你的指令是不是支持局部作用域,比如for循环渲染的数据的单元item,如何识别这个item进行数据更新和dom操作如何控制字符数目,超出禁止输入如何实现全局性的功能定义,从而在各个
8个非常实用的Vue自定义指令

本文在github做了收录 github.com/Michael-lzg- demo源码地址 github.com/Michael-lzg- 在 Vue,除了核心功能默认内置的指令 ( v-model 和 v-show ),Vue 也允许注册自定义指令.它的作用价值在于当开发人员在某些场景下需要对普通 DOM 元素进行操作. Vue 自定义指令有全局注册和局部注册两种方式.先来看看注册全局指令的方式,通过 Vue.directive( id, [definition] ) 方式注册全局指令.然后
详解Vue自定义指令及使用

一.什么是指令学习 vue 的时候肯定会接触指令,那么什么是指令呢? 在 vue 中提供了一些对于页面和数据更为方便的输出,这些操作就叫做指令,以 v-xxx 表示,比如 html 页面中的属性 <div v-xxx ></div> 比如在 angular 中以 ng-xxx 开头的就叫做指令指令中封装了一些 DOM 行为,结合属性作为一个暗号,暗号有对应的值,根据不同的值,会进行相关 DOM 操作的绑定,即可以进行一些模板的操作 vue 中常用的一些内置 v- 指令 v-t
如何使用vue自定义指令构建拖放插件

我们都知道html5的拖放特性,利用它可以很方便的实现拖拽和放置功能,比如一些选择类操作的使用场景,让用户去拖拽比鼠标点击更容易接受和理解.今天我们就利用这一特性,结合vue的自定义指令,来实现一个简单但是实用的拖放插件. 为什么叫它插件?因为我们的目标不是开发一个vue组件,而是两个vue的自定义指令,并且最终会把这两个自定义指令封装到一个es6的class里,在实际项目中引入就可以很方便的使用了. 大部分的拖放使用场景都是把一些待选元素从A区域拖放到B区域.这里就涉及到两个概念,一个是可拖拽

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

相关推荐

随机推荐