Vue3 はフロントエンドの世界で最も人気のあるフレームワークの 1 つであり、Vue3 のライフサイクル機(jī)能は Vue3 の非常に重要な部分です。 Vue3 のライフサイクル機(jī)能を使用すると、特定の時間に特定のイベントをトリガーすることができ、コンポーネントの高度な制御性が向上します。

この記事では、読者が Vue3 ライフ サイクル関數(shù)をすぐに習(xí)得できるように、Vue3 のライフ サイクル関數(shù)の基本概念、各ライフ サイクル関數(shù)の役割と使用法、実裝事例を詳しく調(diào)べて説明します。

1. Vue3 のライフサイクル関數(shù)の基本概念

Vue3 のライフサイクル関數(shù)は Vue3 の非常に重要な部分であり、コンポーネントのレンダリング中に自動的に呼び出されるメソッドです。これにより、開発者は、コンポーネントが破棄、更新、または初期化されたときに、それに応じて処理できるようになります。 React のライフサイクル機(jī)能と同様に、Vue3 のライフサイクル機(jī)能は主に「前」、「作成」、「マウント」、「更新」、「破棄」の 5 つの段階に分かれています。

1. beforeCreate(): このフック関數(shù)は、インスタンスが初期化された後に呼び出されます。データやメソッドなどのプロパティはまだ初期化されていません。コンポーネントはこの時點(diǎn)ではマウントされていないため、実行できませんこのフック関數(shù)で使用される $el へのアクセス。
2. created(): このフック関數(shù)はインスタンスの作成後に呼び出されます。このフック関數(shù)では、データやメソッドなどの屬性は初期化されていますが、$el はまだレンダリングされていません。このフック関數(shù)は、非同期リクエストを?qū)g行するのに適しています。
3. beforeMount(): このフック関數(shù)は、コンポーネントがマウントされる前に呼び出されます。このフック関數(shù)の処理中に、DOM ノードを変更したり、その他の初期化作業(yè)を?qū)g行したりできます。
4. mounted(): このフック関數(shù)は、コンポーネントがマウントされた後に呼び出され、コンポーネントがレンダリングされ、DOM の操作を開始できることを示します。
5. beforeUpdate(): このフック関數(shù)は、コンポーネントが更新される前に呼び出されます。このフック関數(shù)では、一部のステータスのバックアップや変更を行うことができます。
6. updated(): このフック関數(shù)は、コンポーネントが更新された後に呼び出されます。このフック関數(shù)では、いくつかの DOM 更新操作を?qū)g行できます。
7. beforeUnmount(): このフック関數(shù)は、コンポーネントがアンマウントされる前に呼び出されます。このフック関數(shù)では、タイマーのクリーンアップなどの後続作業(yè)を?qū)g行できます。
8. unmounted(): このフック関數(shù)は、コンポーネントがアンマウントされた後に呼び出され、コンポーネントが完全に破棄されたことを示します。

2. 各ライフサイクル関數(shù)の役割と使用法

1. beforeCreate()

beforeCreate() 関數(shù)は、呼び出されたとき、vue インスタンスはまだ作成されておらず、データやメソッドなどのプロパティは初期化されておらず、コンポーネントは現(xiàn)時點(diǎn)ではマウントされていません。したがって、このフック関數(shù)では $el にアクセスできません。

このフック関數(shù)は、通常、いくつかの重要な作業(yè)を初期化するために使用されます。たとえば、このフック関數(shù)では、いくつかのグローバル構(gòu)成を?qū)g行したり、いくつかのデータやコンポーネントを初期化して設(shè)定したりすることもできます。このメソッドは非常に便利です後で操作用のデータを準(zhǔn)備するために使用できます。

典型的な使用例:

beforeCreate() {
  console.log('beforeCreate hook!');
}

2. created()

created() フック関數(shù)は、Vue3 インスタンスの作成後に呼び出されます。関數(shù)內(nèi)にインスタンスが作成されました。この関數(shù)では、インスタンスのデータとメソッドにアクセスできますが、ページはまだレンダリングされていません。

このフック関數(shù)は、通常、インスタンスを初期化するために使用されます。たとえば、このフック関數(shù)では、データのリクエスト、データ処理の実行、またはプラグインの初期化作業(yè)の実行が可能です。このメソッドは非常に便利で、次のことができます。後続の操作用のデータの準(zhǔn)備に使用されます。

典型的な使用例:

created() {
  console.log('created hook!');
}

3. beforeMount()

beforeMount() フック関數(shù)は、コンポーネントがレンダリングされる前に呼び出されます。この時點(diǎn)でコンポーネントは初期化されており、このフック関數(shù)內(nèi)で DOM を操作するなど、いくつかの操作をこの関數(shù)內(nèi)で実行できるようになります。

DOM の最初のレンダリングがブロックされる可能性があるため、このフック関數(shù)では時間のかかる操作を?qū)g行しないことを一般的にお勧めします。

典型的な使用例:

beforeMount() {
  console.log('beforeMount hook!');
}

4. mounted()

Mounted() フック関數(shù)は、コンポーネントがレンダリングされた後に呼び出されます。このフック関數(shù)では、レンダリングされた DOM 要素にアクセスし、要素の幅と高さ、その他の情報を取得するなど、いくつかの操作を?qū)g行できます。

典型的な使用例:

mounted() {
  console.log('mounted hook!');
}

5. beforeUpdate()

beforeUpdate() フック関數(shù)は、コンポーネントが更新される前に呼び出されます。このフック関數(shù)では、一部のステータスのバックアップや変更を行うことができます。

このフック関數(shù)は通常、更新が必要な一部の狀態(tài)で使用されます。たとえば、コンポーネントの狀態(tài)が変更される前に、このフック関數(shù)は比較と検証のために狀態(tài)を別の場所にバックアップするために使用されます。同時に、このフック関數(shù)は期間內(nèi)の一連の計算にも使用でき、例えば必要なデータをこのフック関數(shù)で再取得することもできます。

典型的な使用例:

beforeUpdate() {
  console.log('beforeUpdate hook!');
}

6. updated()

##updated() フック関數(shù)は、コンポーネントが更新された後に呼び出されます。このフック関數(shù)では、DOM 更新後に要素の幅や高さなどの情報を再取得するなどの操作を行うことができます。

這個鉤子函數(shù)一般用于實現(xiàn)某些需要DOM元素更新后才能進(jìn)行的操作，例如對比前后數(shù)據(jù)的信息，需要根據(jù)DOM元素的更新來做出相應(yīng)的處理等。

一個典型的使用示例：

updated() {
  console.log('updated hook!');
}

7. beforeUnmount()

beforeUnmount()鉤子函數(shù)在Vue3組件卸載之前被調(diào)用。在這個鉤子函數(shù)中，可以進(jìn)行一些善后的工作，例如清理定時器等等。

一個典型的使用示例：

beforeUnmount() {
  console.log('beforeUnmount hook!');
}

8. unmounted()

unmounted()鉤子函數(shù)在Vue3組件卸載之后被調(diào)用。這個鉤子函數(shù)表示組件已經(jīng)被完全銷毀。

這個鉤子函數(shù)用于釋放組件占用的內(nèi)存和資源。

一個典型的使用示例：

unmounted() {
  console.log('unmounted hook!');
}

三、實現(xiàn)案例

在Vue3中實現(xiàn)生命周期函數(shù)非常簡單，只需在組件中定義對應(yīng)的函數(shù)即可實現(xiàn)。

下面是一個根據(jù)生命周期函數(shù)實現(xiàn)數(shù)據(jù)的獲取和處理的實現(xiàn)案例：

<template>
  <div>
    <h2>{{ data }}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: '',
    };
  },
  beforeCreate() {
    console.log('開始第一步：數(shù)據(jù)初始化');
    // 進(jìn)行異步請求，獲取數(shù)據(jù)等操作
    this.data = '數(shù)據(jù)初始化成功';
  },
  created() {
    console.log('開始第二步：數(shù)據(jù)處理');
    // 對數(shù)據(jù)進(jìn)行處理，例如進(jìn)行格式化或者加工
    this.data = this.data + '-數(shù)據(jù)處理成功';
  },
  beforeMount() {
    console.log('開始第三步：準(zhǔn)備數(shù)據(jù)');
    // 渲染組件之前，對數(shù)據(jù)進(jìn)行進(jìn)一步的處理
    this.data = this.data + '-數(shù)據(jù)準(zhǔn)備完成！';
  },
  mounted() {
    console.log('開始第四步：操作DOM');
    // 操作DOM，例如獲取元素的寬度或者高度等信息
  },
  beforeUpdate() {
    console.log('開始第五步：備份數(shù)據(jù)');
    // 對需要更新的狀態(tài)進(jìn)行備份，以便進(jìn)行比較和校驗
  },
  updated() {
    console.log('開始第六步：更新狀態(tài)');
    // 根據(jù)DOM更新后的狀態(tài)進(jìn)行狀態(tài)的更新
  },
  beforeUnmount() {
    console.log('開始第七步：清理定時器');
    // 清理組件中的定時器等占用內(nèi)存的資源
  },
  unmounted() {
    console.log('開始第八步：釋放內(nèi)存');
    // 釋放組件中占用的內(nèi)存和資源
  },
};
</script>

以上實現(xiàn)案例中，我們根據(jù)生命周期函數(shù)分別進(jìn)行了數(shù)據(jù)的初始化、數(shù)據(jù)的處理、數(shù)據(jù)的準(zhǔn)備、DOM的操作、狀態(tài)的備份、狀態(tài)的更新、定時器的清理和內(nèi)存的釋放等八個步驟。

總結(jié)

通過本文對Vue3的生命周期函數(shù)的探究和講解，我們可以深入了解和理解每個生命周期函數(shù)的作用和使用方法，用于幫助讀者深入掌握Vue3的生命周期函數(shù)。同時，在實際項目中的應(yīng)用中，我們也可以根據(jù)具體需求，在生命周期函數(shù)中實現(xiàn)相應(yīng)的邏輯，以滿足實際需求的業(yè)務(wù)場景。

以上がVue3 のライフサイクル機(jī)能: Vue3 のライフサイクルをすばやくマスターしますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。