在删除组件之前删除事件侦听器答案

【问题标题】：Removing event listeners before delete of the component在删除组件之前删除事件侦听器
【发布时间】：2020-09-04 10:10:09
【问题描述】：

关于此解决方案的问题： Dynamically add and remove classes on mouseover - Vue.js

该指令运行良好，谢谢！但是当我在某个被销毁的组件上使用它时（使用悬停可见按钮从它的父数组中删除），我得到一个错误：

[Vue 警告]：指令 add-class-hover unbind hook 中的错误：“TypeError：无法在 'EventTarget' 上执行 'removeEventListener'：需要 2 个参数，但只有 1 个存在。”

这是有道理的，因为解除绑定发生在组件被移除之后（因为不再检测到悬停）。

如何删除此绑定，使控制台保持非红色？ beforeDestroy 似乎不适用于指令。那么是否有一个技巧可以调用“删除组件的所有侦听器及其子组件”。

【问题讨论】：

您是否有理由不考虑接受的答案？
是的，我在几个地方都需要这个功能，所以我认为做一个指令是更干净的方法。想知道接受的答案是否会在删除时引发错误，因为@mouseover 在技术上也是一个监听器......会尝试。
如果监听器被放置在你正在销毁的元素上，则不需要移除它。一旦元素消失，将无法触发任何事件。当您将侦听器放置在不同的元素（某个父元素或window）上时，您只需要清理（删除任何绑定的侦听器）。您可以使用beforeDestroy 钩子来删除侦听器，但它很臃肿（如果侦听器位于即将被销毁的元素上）。没有必要清理在下一个滴答声中将有效地不复存在的东西。你只是无缘无故地运行额外的代码。

标签： javascript vue.js dom-events vue-directives

【解决方案1】：

在 vue js 中

将event 传递给null 值。

Vue.directive('add-hover-class', {
  bind(el, binding, vnode) {
    const {
      value = ""
    } = binding;
    el.addEventListener('mouseenter', () => {
      el.classList.add(value)
    });
    el.addEventListener('mouseleave', () => {
      el.classList.remove(value)
    });
  },
  unbind(el, binding, vnode) {
    el.removeEventListener('mouseenter', null);
    el.removeEventListener('mouseleave', null);
  }
})

【讨论】：