将事件绑定到Vue.js中的窗口

Question

我对Vue.js很陌生。最近，我在一个组件中的窗口上附加/分离键盘事件遇到了问题。这是我的方法：

created() {
  this.initHotkeys();
},

beforeDestroy() {
  this.discardListeners();
},

methods: {
  initHotkeys() {
    window.addEventListener('keyup', this.processHotkey.bind(this));
    window.addEventListener('keydown', this.removeDefaultBehavior.bind(this));
  },

  discardListeners() {
    window.removeEventListener('keyup', this.processHotkey.bind(this));
    window.removeEventListener('keydown', this.removeDefaultBehavior.bind(this));
  },

....

事件会附加并启动，不会出现任何问题。但是，当我切换组件时，事件仍然保持附加到窗口。经过一堆尝试，我发现如果我.bind(this)从所有回调中删除该部分，则事件将成功分离。

谁能解释一下为什么会这样？

先感谢您！

Answer 1

.bind(this) 返回一个新函数。

this.processHotkey.bind(this) === this.processHotkey.bind(this)
// => false

这就是为什么删除侦听器不起作用的原因。幸运的是，绑定是不必要的，因为组件方法已经绑定。

因此，将其删除。