在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

这就是为什么删除听众并不起作用的原因。幸运的是，这种绑定不是必需的，因为组件方法已经绑定了。

所以只需删除它。