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

Question

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

既然没有函数名来指定附加到它的函数，我以后可以删除那个侦听器吗？

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

Answer 1

如果不保存对函数的引用，就没有办法。

你可以这样做：

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

Answer 2

你不能。

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

Answer 3

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

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

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

这种方法可以在组件外部访问，并且可以被监视或模拟，这也使测试变得更容易。