Vue.jsのウィンドウへのイベントのバインド

Question

Vue.jsではかなり新しくなっています。最近、私は、キーボードイベントを自分のコンポーネントの1つのウィンドウのウィンドウにアタッチ/デタッチする際に問題が発生しました。ここに私の方法があります：

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 

リスナーの削除が機能しない理由です。コンポーネントメソッドが既にバインドされているため、バインドは必要ありません。

だから、それを削除してください。