如何删除绑定到匿名函数的侦听器？

Question

在我的组件中，我有一个附加到匿名函数的侦听器。

我可以稍后删除该侦听器吗，因为没有函数名称来指定附加到它的函数？

mounted() {
  EventBus.$on('setStickyHeaderCaption', (payload) => {
    ...
  });
},
beforeDestroy() {
  EventBus.$off('setStickyHeaderCaption');
}

Answer 1

你不能。

无法确定要销毁哪个侦听器，因为正如您所说，您使用了匿名函数作为回调。

Answer 2

不保存对函数的引用是没有办法的。

你可以这样做：

mounted() {
  this.anon = (payload) => {
   ...
  }
  EventBus.$on('setStickyHeaderCaption', this.anon);
},
beforeDestroy() {
  EventBus.$off('setStickyHeaderCaption', this.anon);
}

Answer 3

事件侦听器通常由提供的函数标识。如果函数是匿名的，则无法删除侦听器。

Vue方法就是这样。方法已经绑定到 Vue 实例，不需要是箭头：

methods: {
  setStickyHeaderCaptionHandler(payload) {...}
},
mounted() {
  EventBus.$on('setStickyHeaderCaption', this.setStickyHeaderCaptionHandler);
},
beforeDestroy() {
  EventBus.$off('setStickyHeaderCaption', this.setStickyHeaderCaptionHandler);
}

方法可以在组件外部访问并且可以被窥探或模拟也使测试更容易。

如何删除绑定到匿名函数的侦听器？

How to remove a listener bound to an anonymous function?

event-listener

vue.js