【Vue.js】ライフサイクルフック使い分け・順番を初心者にも分かりやすく書く

Vue.jsは、使いやすいフレームワークでありながら強力な機能を備えています。

Vue.jsを使ってウェブアプリを作ったり、ホームページを作るとき、コンポーネントのライフサイクルを知ることはとても大切です。
これが分かっていないと思い通りに動かないことが多々あり、重要な概念であります。

今回は、Vue.jsのライフサイクルに焦点を当てて、コンポーネントがどのように生まれ変わり、最終的に消えるかを確認してみましょう。

ライフサイクルとは？

Vue.jsのライフサイクルとは、コンポーネントが生成され、更新され、最終的に破棄される一連のステップを指します。
この特定のタイミングで自分のコードを実行することが可能です。

以下に主要なライフサイクルフックとその役割をご紹介します。

主要なライフサイクルフックとそのステップ

実行の順番通りに書いています。

beforeCreate

インスタンスは生成されたがデータ（ref(), reactive(), computed()含む）が設定される前です。
dataはまだリアクティブにされておらず、
eventsもまだセットアップされていません。

beforeCreateの使用例

created（よく使う）

インスタンスが生成され､データが初期化された後です。
DOMはまだ生成されておらず、DOM操作は行えませんが、dataとeventsがセットアップされており、それらにアクセスできます。

beforeMount

インスタンスがDOM要素にマウントされる前です。 テンプレート内の要素やデータが、実際のDOMに適用される前のタイミングです。

beforeMountの使用例

mounted（よく使う）

インスタンスがDOM要素にマウントされた後です。 ここでやっとDOM（templateタグで囲んだHTML要素）操作が可能になります。
mountedフック内でDOM要素にアクセスして、初期化や外部ライブラリの統合を行うことができます。

beforeUpdate

データは更新されましたが、DOMに適用される前です。

（リアクティブなデータというのは常に監視され、値が変更・更新されると再描画が行われます。
その再描画の前にこのフックが呼び出されます。）

ただし、更新がなかった場合は呼び出されません。

beforeUpdateの使用例

updated

データが更新され、DOMに適用された後です。
リアクティブなデータが変更され、再描画が行われた後に呼び出されます。
DOMに変更が反映された後の処理をここで行うことができます。

updatedの使用例

beforeDestroy

Vueインスタンスが破壊される前です。
このフック内では、インスタンスが破棄される前に必要なクリーンアップや解除の処理を行うことができます。
基本的にあまり使う機会はありません。

destroyed

Vueインスタンスが破壊された後です。
このフックは、インスタンスが完全に破棄された後に呼び出されます。インスタンスに関連するリソースの解放や後片付けを行うために使用できます。
基本的にあまり使う機会はありません。

ライフサイクルフック一覧

Vue.createApp({

    data: function () {
        return {
            message: '',
        }
    },

    beforeCreate() {
         // インスタンス生成前のフックです。
    },

    created() { 
        // インスタンス生成後、データ初期化前のフックです。
    },

    beforeMount() {
        // DOMへのマウント前のフックです。
    },

    mounted() {
         // DOMへのマウント後のフックです。
    },

    beforeUpdate() {
        // データ更新前のフックです。
    },

    updated() {
        // データ更新後のフックです。
    },

    beforeDestroy() {
        // インスタンス破棄前のフックです。
    },

    destroyed() {
        // インスタンス破棄後のフックです。
    }


}).mount('#app')

まとめ

Vue.jsのライフサイクルは、コンポーネントの生成、更新、破棄のプロセスを管理する重要な概念です。
各ステップで特定の処理を実行することで、アプリケーションの動作を細かく制御できます。
ライフサイクルを活用することで、より柔軟な開発が可能になります。