vue 自定义指令中：addEventlistener监听事件函数传参，使用removeEventListener解绑

原创已于 2023-04-25 16:31:11 修改 · 4.4k 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

坤鹏马

关注

标签

#前端 #javascript #vue.js

分类前端开发

于 2023-04-25 16:27:25 首次发布

文章介绍了在Vue3中使用自定义指令时，由于addEventListener和removeEventListener参数需一致才能有效解除绑定，而匿名函数无法满足这一条件。通过创建可存储额外数据的事件处理函数，解决了参数传递和事件解绑的问题，防止内存泄漏。

一般在组件中使用addeventlistener添加事件监听的时候，在组件销毁的时候都要使用removeEventListener进行销毁，不然会造成内存泄漏。

但是addeventlistener和removeEventListener的参数必须是一样的，才有效

例如：在vue3中添加全局自定义指令

app.directive('copy', {
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click', (e) => {
      console.log(e, el, binding, vnode, prevVnode)
    })
  },
  beforeUnmount(el, binding, vnode, prevVnode) {
    el.removeEventListener('click', (e) => {
      console.log(e, el, binding, vnode, prevVnode)
    })
  }
})

上面我们在自定义指令的时候在mounted中对dom添加事件监听，在beforeUnmount中进行事件解绑，但是第二个参数是匿名函数，所以add和remove的函数不是同一个所以参数不一致，remove是无效的

当我们修改成参数一致时：

const clickHandle = function(e) {
  console.log(e)
}
app.directive('copy', {
  mounted(el, binding, vnode, prevVnode) {
    el.addEventListener('click', clickHandle)
  },
  beforeUnmount(el, binding, vnode, prevVnode) {
    el.removeEventListener('click', clickHandle)
  }
})

上面这样写确实可以消除掉绑定的事件，但是无法进行参数的传递无法再函数中使用el，biinding等参数

所以我们需要这样写：

const getEventHandle = function (data){
  const fn = (e) => {
    if (!e._kpma_vts) {
      e._kpma_vts= Date.now()
    } else if (e._kpma_vts<= fn.attached) {
      return
    }
    e.stopPropagation()
    e.preventDefault()
    fn.callBack(e)
  }
  fn.attached = Date.now()
  Object.assign(fn, data)
  return fn
}
const clickHandle = function(e){
  console.log(e)
  const {el, binding, vnode, prevVnode} = this
  console.log(el, binding, vnode, prevVnode)
}
app.directive('copy', {
  mounted(el, binding, vnode, prevVnode) {
    el._kpma_event = getEventHandle({el, binding, vnode, prevVnode, callBack: clickHandle})
    el.addEventListener('click', el._kpma_event)
  },
  beforeUnmount(el) {
    el.removeEventListener('click', el._kpma_event)
  }
})