Vue3 ライフサイクルフック

Vue.js のライフサイクルフック関数とは、コンポーネントインスタンスの作成、更新、破棄などのプロセスにおいて、Vue が自動的に呼び出す一連のメソッドのことです。これらのステップで、コンポーネントは「ライフサイクルフック」と呼ばれる一連の関数をトリガーし、開発者が特定のタイミングでカスタムコードを実行できるようにします。

ライフサイクルフックの登録と使用

mounted フック：このフックは、コンポーネントが初期レンダリングを完了し DOM ノードを生成した後にトリガーされます。例：

export default {
  mounted() {
    console.log(`组件已挂载。`);
  }
}

その他のよく使われるフック：mounted のほかに、updated や unmounted などのフックがあり、これらはインスタンスの異なるライフサイクル段階で呼び出されます。

ライフサイクルフックの注意事項

this コンテキスト：すべてのライフサイクルフック関数内の this は、自動的にそれを呼び出したコンポーネントインスタンスを指します。

アロー関数の使用を避ける：ライフサイクルフックを定義するときは、アロー関数を使用しないでください。this を介してコンポーネントインスタンスを取得できなくなるためです。

ライフサイクルフックを適切に使用することで、開発者はコンポーネントのさまざまな段階で特定のロジックを実行し、コンポーネントの柔軟性と機能を高めることができます。

以下はインスタンスのライフサイクル図です：

以下は Vue.js のライフサイクルフック関数です

フック名トリガーのタイミング
beforeCreateインスタンスの初期化後、データ監視とイベント設定の前に呼び出されます。
createdインスタンスの作成完了直後に呼び出されます。このとき、インスタンスはデータ監視、プロパティとメソッドの計算、watch/event イベントコールバックをすでに完了しています。
beforeMountマウント開始前に呼び出されます：関連する render 関数が初めて呼び出されます。
mountedel新しく作成されたvm.$el置き換えられ、インスタンスにマウントされた後にこのフックが呼び出されます。
beforeUpdateデータ更新時に呼び出され、仮想 DOM の再レンダリングとパッチ適用の前に発生します。
updatedデータ変更による仮想 DOM の再レンダリングとパッチ適用の後に呼び出されます。
beforeUnmountインスタンスのアンマウント前に呼び出されます。
unmountedインスタンスがアンマウントされた後に呼び出されます。

以下は Vue コンポーネントのライフサイクルフックの詳細な説明です：

Vue.js のライフサイクルフック関数とは、コンポーネントインスタンスの作成、更新、破棄などのプロセスにおいて、Vue が自動的に呼び出す一連のメソッドのことです。これらのフック関数を通じて、コンポーネントのさまざまなライフサイクル段階で特定の操作を実行できます。以下は Vue コンポーネントのライフサイクルフックの詳細な説明です：

1. beforeCreate

  • 説明: インスタンスの初期化後、データ監視とイベント設定の前に呼び出されます。
  • 使い方: この段階では、Vue によってプロキシされていないデータを初期化できます。

例:

例

beforeCreate() {
  console.log('beforeCreate:インスタンスが作成されたばかり');
}

2. created

  • 説明: インスタンスの作成完了直後に呼び出されます。このとき、インスタンスは以下の設定を完了しています：データ監視、プロパティとメソッドの計算、watch/event イベントコールバック。マウント段階はまだ始まっていません。
  • 使い方: この段階では、データにアクセスして変更できますが、DOM はまだマウントされていません。

例:

例

created() {
  console.log('created:インスタンスの作成が完了しました');
}

3. beforeMount

  • 説明: マウント開始前に呼び出されます：関連する render 関数が初めて呼び出されます。
  • 使い方: マウント前にいくつかの操作を実行できます。例えば、DOM 構造の変更などです。

例:

例

beforeMount() {
  console.log('beforeMount:マウント開始前');
}

4. mounted

  • 説明: el新しく作成されたvm.$el置き換えられ、インスタンスにマウントされた後にこのフックが呼び出されます。
  • 使い方: この段階では、DOM を操作し、DOM に関連するロジックを実行できます。

例:

例

mounted() {
  console.log('mounted:インスタンスはマウントされました');
}

5. beforeUpdate

  • 説明: データ更新時に呼び出され、仮想 DOM の再レンダリングとパッチ適用の前に発生します。
  • 使い方: この段階では、更新前の状態にアクセスできます。

例:

例

beforeUpdate() {
  console.log('beforeUpdate:データ更新前');
}

6. updated

  • 説明: データ変更による仮想 DOM の再レンダリングとパッチ適用の後に呼び出されます。
  • 使い方: この段階では DOM を操作できますが、この間にデータを変更しないでください。無限ループの更新を引き起こす可能性があるためです。

例:

例

updated() {
  console.log('updated:データ更新完了');
}

7. beforeUnmount（Vue 3）

  • 説明: インスタンスのアンマウント前に呼び出されます。
  • 使い方: インスタンスがアンマウントされる前に、いくつかのクリーンアップ操作を実行します。例えば、イベントリスナーの解除などです。

例:

例

beforeUnmount() {
  console.log('beforeUnmount:インスタンスのアンマウント前');
}

8. unmounted（Vue 3）

  • 説明: インスタンスがアンマウントされた後に呼び出されます。
  • 使い方: インスタンスがアンマウントされた後に、いくつかのクリーンアップ操作を実行します。例えば、タイマーの破棄などです。

例:

例

unmounted() {
  console.log('unmounted:インスタンスはアンマウントされました');
}

例

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate（データが変化したときにトリガーされます）
  6. updated（データが変化したときにトリガーされます）
  7. beforeUnmount
  8. unmounted

例

以下は、すべてのライフサイクルフック関数の使用法を示す完全な Vue コンポーネントの例です：

例

const LifecycleDemo = {
  template: `<div>{{ message }}</div>`,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  beforeCreate() {
    console.log('beforeCreate:インスタンスが作成されたばかり');
  },
  created() {
    console.log('created:インスタンスの作成が完了しました');
  },
  beforeMount() {
    console.log('beforeMount:マウント開始前');
  },
  mounted() {
    console.log('mounted:インスタンスはマウントされました');
  },
  beforeUpdate() {
    console.log('beforeUpdate:データ更新前');
  },
  updated() {
    console.log('updated:データ更新完了');
  },
  beforeUnmount() {
    console.log('beforeUnmount:インスタンスのアンマウント前');
  },
  unmounted() {
    console.log('unmounted:インスタンスはアンマウントされました');
  }
};

const app = Vue.createApp({
  components: {
    LifecycleDemo
  }
});

app.mount('#app');

試してみる »

この例は、各ライフサイクルフック関数のログをコンソールに出力し、各ライフサイクル段階の順序と用途の理解に役立ちます。

コンポジション API フック

Vue 3 はコンポジション API（Composition API）を導入し、setupsetup 関数を使用すると、ライフサイクルフックを論理的により明確に整理できます。コンポジション API を使用する場合、これらのフックはonXxxsetup 関数によって定義されます：

  • onMounted：〜と同等ですmounted。
  • onBeforeUnmount：〜と同等ですbeforeUnmount。
  • onUnmounted：〜と同等ですunmounted。
  • onBeforeMount：〜と同等ですbeforeMount。
  • onBeforeUpdate：〜と同等ですbeforeUpdate。
  • onUpdated：〜と同等ですupdated。
  • onCreatedとonBeforeCreateコンポジション API では通常あまり使用されません。なぜならsetupsetup 内のコードが作成段階で実行されるからです。

コンポジション API のライフサイクルフックの使用：

例

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('コンポーネントはマウントされました！');
      // ここで初期化操作を実行します
    });

    onBeforeUnmount(() => {
      console.log('コンポーネントはまもなくアンマウントされます！');
      // ここでクリーンアップ操作を実行します
    });
  }
};

コンポジション API の利点：

  • 再利用性が高い：ライフサイクルフックを他のロジックと組み合わせることができ、カプセル化と再利用が容易になります。
  • ロジックがより明確：setup 内のsetup他のロジックと一緒に1つの関数で実装することで、コードの分散と複雑さを軽減します。
その他の拡張