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

こんにちは、ryohei(@ityryohei)です!

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

Vue.jsでページ読み込み完了後とか離脱時に処理を実行したいんだけど、どうすればいいんだろう?

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

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

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

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

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

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

Vue 2.x

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

Vue 3.x

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

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

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

ページ読み込み完了後のイベントを捕捉するには、リソースの読み込み完了後に処理が実行されるようにします。ただ、ライフサイクルフックにはリソースの読み込みが完了した後の段階で実行される関数がないため、マウント後に実行されるmountedwondow.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でページ読み込み完了後・離脱時に処理を実行する方法のご紹介でした!

Adobe Creative Cloudのコンプリートプランを特別価格で手に入れよう!

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍