Vue.js のmountedでaddEventListenerやsetIntervalするとき、後始末を忘れない

当たり前だけど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だけど実はよくわかっていない。登録時、削除時で揃えないといけないのは分かる。

developer.mozilla.org