javascript - 如何从 Vue 组件中删除事件监听器

Question

我有一个 Vue2 组件，其中包含我在 mounted 上创建的添加事件监听器。我想知道当组件被销毁时如何正确删除这个监听器？

<template>
    <div>
      ...
    </div>
  </template>
  
  <script>
  export default {
    mounted() {
        window.addEventListener('click', (evt) => {
          this.handleClickEvent(evt)
        })
    },
    destroyed() {
      //   window.removeEventListener('click', ????);
    },
    methods: {
      handleClickEvent(evt) {
        // do stuff with (evt) 
      },
    },
  }
  </script>
  

Answer 1

您必须保留对已注册点击处理程序的引用，以便稍后能够将其删除:

mounted() {
  this.clickHandler = () => { ... };
  window.addEventListener('click', this.clickHandler);
}

beforeDestroy() {
  window.removeEventListener('click', this.clickHandler);
}

但是，您似乎已经在组件中定义了此函数。它的名称为handleClickEvent。因此没有理由围绕它创建箭头函数包装器。您可以直接使用它:

mounted() {
  window.addEventListener('click', this.handleClickEvent);
}

beforeDestroy() {
  window.removeEventListener('click', this.handleClickEvent);
}

vue2 中提供的另一个巧妙功能(遗憾的是，vue3 中没有)是动态注册一个钩子(Hook)，它允许在 mounted() 中添加和删除处理程序，而无需保留在组件中引用它:

mounted() {
  const handler = () => { ... }; // local variable
  window.addEventListener('click', handler);
  this.$once('hook:beforeDestroy',
    () => window.removeEventListener('click', handler)
  );
}

https://v2.vuejs.org/v2/guide/components-edge-cases.html#Programmatic-Event-Listeners