將事件綁定到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

這就是為什么刪除偵聽器不起作用的原因。 幸運的是，綁定是不必要的，因為組件方法已經綁定。

因此，將其刪除。