当たり前だけどvue routerで読み込んでいるコンポーネントのmountedでaddEventListenerやsetIntervalをしていると、ページの行き来のたびに登録されて、大変なことになる。リクエスト単位でスレッド、プロセスなどが変わるサーバー側の処理とSPAの違いを意識しないといけない。
destroyedで削除をセットにするのを忘れないようにする。
removeEventListenerとclearIntervalには同じ関数オブジェクトを渡す必要があるため、いつもは無名関数で書いてしまうが、methodsに書いて使う。
setIntervalの方は、返り値のオブジェクトをclearIntervalするのでdataに入れておく。
コードを書いてちゃんと削除できているかどうかは、登録する関数でconsole.logするなどして、ページを移動して不要に何度も登録して実行されていないか確認した。
data: function(){ return { updateMessageTimer : null } }, methods: { updateMessage: function(){ // do something }, changeState: function(){ // do something } }, mounted: function(){ window.addEventListener('popstate', this.changeState, false) this.updateMessageTimer = setInterval(this.updateMessage, 5000) }, destroyed: function () { window.removeEventListener('popstate', this.changeState, false) clearInterval(this.updateMessageTimer) }
addEventListenerのuseCaptureオプションはとりあえずfalseだけど実はよくわかっていない。登録時、削除時で揃えないといけないのは分かる。