メソッドを適用し、Vue 3 のライフサイクル原則を理解する方法

原則の概要

Vue 3 のライフ サイクルは、コンポーネントが作成から破棄まで通過する一連のイベントを指します。データの初期化、ビューのレンダリング、非同期データなどVue 3 では、コンポーネントのライフサイクルは setup() 関数を通じて定義されます。

インスタンス分析

Vue 3 のライフ サイクルには次の段階が含まれます:

1. beforeCreate

インスタンスが作成される前、つまり作成前初期化が呼び出されます。現時点では、コンポーネント インスタンスは初期化されておらず、データ、メソッド、計算などの属性にアクセスすることはできず、コンポーネントの状態が初期化される前にいくつかの操作が実行されます。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
}

2.created

は、インスタンスの作成後、つまり初期化後に呼び出されます。この時点では、データの監視などの設定は完了していますが、DOM はまだマウントされておらず、データ、メソッド、計算などの属性にアクセスできます。作成したフック関数を使用して、データの初期化やイベント監視などの操作を行うことができます。

import { onMounted, onUnmounted } from 'vue';

export default {
  data() {
    return {
      count: 0
    };
  },
  created() {
    console.log('created');
  },
  mounted() {
    onMounted(() => {
      console.log('component mounted');
    });
  },
  unmounted() {
    onUnmounted(() => {
      console.log('component unmounted');
    });
  }
}

3. beforeMount

はマウントが開始される前に呼び出されます。この段階では、実際の DOM ノードはまだレンダリングされていません。 beforeMount フック関数を使用すると、コンポーネントがマウントされる前にアニメーションの読み込みなどの非同期操作を実行できます。

export default {
  beforeMount() {
    console.log('beforeMount');
  }
}

4.mounted

はマウント完了後に呼び出されます。この時点で、コンポーネントは実際の DOM をレンダリングしました。マウントされたフック関数は、ref を介した DOM ノードの取得やイベント リスナーの登録など、サーバーとの対話後に DOM 操作を初期化し、コンポーネント データを設定するためによく使用されます。

export default {
  mounted() {
    console.log('mounted');
    const button = this.$refs.myButton;
    button.addEventListener('click', () => {
      this.count++;
    });
  }
}

5. beforeUpdate

はデータが更新される前に呼び出されます。この時点で、更新する前に古いデータ状態にアクセスできます。 beforeUpdate フック関数を使用すると、コンポーネント データが更新される前に、クラスやスタイルの動的バインディングなどの一部の操作を実行できます。

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}

6. updated

は、データが更新された後に呼び出されます。この時点で、コンポーネントは DOM を更新し、最新のデータ状態にアクセスすることで DOM 操作を完了できます。更新されたフック関数を使用すると、コンポーネント データが更新された後に、アニメーション効果のトリガーなどの一部の操作を実行できます。

export default {
  updated() {
    console.log('updated');
  }
}

7. beforeUnmount

は、コンポーネントがアンインストールされる前に呼び出されます。この時点では、コンポーネント インスタンスはまだ完全に利用可能ですが、そのビューは破棄されており、更新されません。 beforeUnmount フック関数を使用すると、イベント リスナー、タイマー、非同期リクエストのキャンセルなど、コンポーネントがアンマウントされる前にいくつかのクリーンアップ操作を実行できます。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}

8.unmounted

は、コンポーネントがアンマウントされた後に呼び出されます。この時点で、コンポーネント インスタンスとそれに関連付けられたすべての DOM 要素は破棄され、コンポーネントの内部データとメソッドにはアクセスできなくなります。アンマウントされたフック関数を使用すると、コンポーネントがアンマウントされた後に最終的なクリーンアップ操作を実行できます。

export default {
  unmounted() {
    console.log('unmounted');
  }
}

アクティブ化、非アクティブ化、errorCaptured などの一部のライフサイクル関数は Vue 3 から削除されており、新しい Comboposition API を通じて実装できることに注意してください。

以上がメソッドを適用し、Vue 3 のライフサイクル原則を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。