Vue/Nuxt

【Nuxt/Vue】イベントリスナーを設置したらbeforeDestoryでクリア処理をいれよう

あきぞらです。

Vueで開発をしていた時に、

クリックイベントなどのイベントリスナーがページ遷移をしても終了しないという事象がありました。

今回はその対処方法について紹介していきます。

イベントリスナーを実装したらbeforeDestoryも設定する

Vueファイルのスクリプトで、以下のように設定していました。

画面のサイズが変わったら、handleというメソッドを実行する処理です。

mounted () {
  window.addEventListener('resize', this.handle);
}

しかしこのままでは、ページ遷移しても処理が画面上に残ったままになります。

これを解決するのが、クリア処理を入れる実装です。

addEventListenerでイベントリスナーを追加したら、

removeEventListenerでクリア処理を行います。

そのクリア処理を、beforeDestroy(インスタンスが破棄される直前に呼ばれる処理)に追加します。

mounted () {
  window.addEventListener('resize', this.handle);
},
beforeDestroy: function () {
  window.removeEventListener('resize', this.handle);
},

これを設置しておくことで、ページ遷移をする直前などでクリア処理を実行してくれます。

-Vue/Nuxt

Copyright© あきぞらてっく , 2021 All Rights Reserved Powered by AFFINGER5.