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

Vue.js ライフサイクルフックは、Vue コンポーネントのライフサイクルの特定の段階でコードを実行できるようにする一連のメソッドです。作成から破棄まで、コンポーネントの存在のさまざまなポイントを活用する方法を提供します。これらのフックは、データの初期化、イベントリスナーの設定、リソースのクリーンアップなどのタスクを実行するために不可欠です。

Vue コンポーネントのライフサイクル

Vue コンポーネントのライフサイクルは、いくつかのステージに分けられます。各ステージは、コードを実行するために使用できる特定のライフサイクルフックに関連付けられています。Vue コンポーネントのライフサイクルの主なステージは次のとおりです。

作成: コンポーネントを初期化しています。
マウント: コンポーネントが DOM に追加されています。
更新中: コンポーネントの反応データが変更中です。
破棄: コンポーネントが DOM から削除されています。

キーライフサイクルフック

Vue.js には、コンポーネントで使用できるライフサイクルフックがいくつか用意されています。各フックは、ライフサイクルの特定のステージに対応しています。最もよく使用されるフックは次のとおりです。

created: コンポーネントインスタンスが作成された後に呼び出されます。データを取得したり、コンポーネントの状態を初期化したりするのに適した場所です。
マウント: コンポーネントが DOM にマウントされた後に呼び出されます。ここで、DOM 操作を実行したり、非同期操作を開始したりできます。
updated: コンポーネントの反応型データが変更され、DOM が更新された後に呼び出されます。データの変更に反応するのに役立ちます。
destroy: コンポーネントが破棄される前に呼び出されます。このフックを使用して、イベントリスナーやタイマーなどのリソースをクリーンアップします。

ライフサイクルフックの例

フックを作成

created フックは、コンポーネントインスタンスが作成されてからマウントされるまでの間にアクションを実行するために使用されます。以下は、created フックを使用してデータを取得する例です。

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

マウントフック

mounted フックは、コンポーネントが DOM に追加された後に呼び出されます。これは、DOM 操作を実行したり、コンポーネントが DOM 内にあることを必要とする非同期操作を開始するのに最適です。次に例を示します。

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

更新されたフック

updated フックは、コンポーネントの反応データが変更され、DOM が更新された後に呼び出されます。これは、データの変更に反応するのに役立ちます。次に例を示します。

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

破壊されたフック

destroyed フックは、コンポーネントが破棄される前に呼び出されます。このフックを使用して、イベントリスナーの削除やタイマーの停止などのクリーンアップを実行します。次に例を示します。

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

結論

Vue.js ライフサイクルフックは、コンポーネントのライフサイクルのさまざまな段階を管理するために不可欠です。これらのフックを理解して使用することで、データの初期化、DOM の操作、更新の処理、リソースのクリーンアップを効果的に行うことができます。ライフサイクルフックを Vue.js コンポーネントに組み込むことで、堅牢で応答性の高いアプリケーションを作成できます。

ライフサイクル vue 作成マウント更新破棄フックコンポーネントデータ dom メソッドイベントクリーンアップ初期化