【Vue.js】ページ読み込み完了後・離脱時に処理を実行する

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vue.jsのライフサイクルフックを使って、ページ読み込み完了後・ページ離脱時に処理を実行する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

Vue.jsのライフサイクルフックについて

Vue.jsでは、インスタンスの生成から破壊まで一連の初期化を行います。初期化にはいくつか段階があり、インスタンスをマウント、DOMの構築、データの初期化、アップデートなど様々です。

ライフサイクルフックとは、Vue.jsのインスタンスが初期化される過程の中で、特定の段階で開発者が独自の処理を追加することができるように呼び出される関数を指します。関数の中に処理を追加することで、特定の段階で実行したい処理を作ることが可能となります。

ライフサイクルフックで実行される関数は下記の通りです。Vue2系と3系で若干名称が関数の役割が変わっていいますので、それぞれリンクを記載しておきます。自身で構築されているバージョンに合わせてドキュメントをご確認ください。

Vue 2.x

Vue.js 2x ライフサイクルダイアグラム

Vue 3.x

Vue.js 3.x ライフサイクルフック

本記事では上記のライフサイクルフックを使ってページの読み込み完了後やページ離脱時に処理を実行する方法をご紹介したいと思います。

ページ読み込み完了後に処理を実行する

ページ読み込み完了後のイベントを捕捉するには、リソースの読み込み完了後に処理が実行されるようにします。ただ、ライフサイクルフックにはリソースの読み込みが完了した後の段階で実行される関数がないため、マウント後に実行されるmountedでwondow.onloadを実行します。そうすることでページの読み込みが完了した後に処理を実行することができます。

Vue 2.x

mounted() {
    window.onload = ()=>{
        alert('ページが読み込まれました！')
    }
}

Vue 3.x

mounted() {
    window.onload = ()=>{
        alert('ページが読み込まれました！')
    }
}

ページ離脱時に処理を実行する

ページ離脱時に処理を行いたい場合は、Vueインスタンスのマウントが解除(破棄)された後に実行される関数内に処理を記述します。Vue2系と3系で関数名が変更になっていますが、使用感は変わらないと思いますので、そのまま置き換えてもらえれば問題ありません。

Vue 2.x

destroyed() {
    alert('ページを離脱します！')
}

Vue 3.x

unmounted() {
    alert('ページを離脱します！')
}

最後に

Vue.jsのライフサイクルフックはインスタンスの生成から破壊までの特定段階で実行することができる関数です。ライフサイクルダイアグラムは学習を始めた段階で目にする内容ですが、他フレームワークの経験があったり、Vue.jsの全体像を把握しないと理解に時間がかかると思います。まずはVue.jsに触れることが大事ですので、ある程度学習を進めて、Vueインスタンスの理解が深まった段階で再度見直すのも良いかもしれませんね。

以上、Vue.jsでページ読み込み完了後・離脱時に処理を実行する方法のご紹介でした！