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

這就是爲什麼刪除監聽器不起作用。幸運的是，這種綁定並不是必需的，因爲組件方法已經綁定。

所以，只要刪除它。