Vue はフック関数とライフサイクル管理をどのように実装しますか?

Vue は、コンポーネントを簡単に管理、変更、操作できるように、いくつかの特別なメカニズムを提供する人気のある JavaScript フレームワークです。重要なメカニズムの 1 つは、フック機能とライフサイクル管理です。この記事では、Vue のフック関数とライフサイクルの概念を紹介し、それらを実装する方法について説明します。

1. フック関数とライフサイクルとは何ですか?

Vue では、すべてのコンポーネントにライフサイクルがあります。ライフサイクルは、コンポーネントがさまざまな段階を経るプロセスです。 Vue はコンポーネントのライフサイクルをさまざまなステージに分割し、各ステージで特定の操作を実行します。これらの操作は Vue ではフック関数と呼ばれます。

フック関数は、コンポーネントのライフサイクルのさまざまな段階で実行される特定のメソッドです。 Vue では、フック関数は、コンポーネントのさまざまなライフサイクル段階で一部の操作を実行するのに役立ちます。これにより、コンポーネントの動作の管理が容易になります。

2. Vue ライフ サイクルのさまざまなステージ

Vue のライフ サイクルは 8 つの異なるステージに分けることができます:

• beforeCreate
• 作成済み
• 前マウント
• マウント済み
• 更新前
• 更新済み
• 前破棄
• 破棄済み

Vue コンポーネントのライフサイクルでは、各ステージに、特定の時点で特定の操作を実行できる対応するフック関数があります。以下は、各ステージとそれに対応するライフサイクル関数の詳細な紹介です:

• beforeCreate: インスタンスが初期化される前に呼び出されます。この時点ではインスタンスのプロパティは初期化されていないため、この段階ではデータと計算されたプロパティにアクセスできません。
• created: インスタンスは作成され、データは初期化されましたが、DOM はまだマウントされていません。この時点で、データと計算されたプロパティにはアクセスできますが、DOM ノードは取得できません。
• beforeMount: DOM はマウントされましたが、まだレンダリングされていません。この時点で、DOM ノードとコンポーネント インスタンスを取得できます。
• mounted: DOM はマウントされ、レンダリングされました。この時点で、DOM ノードにアクセスして jQuery と同様の操作を実行できますが、この段階ではカスタム フックを使用して DOM ノードのさまざまなイベントをリッスンするのが最善です。
• beforeUpdate: データは変更されましたが、DOM はまだ再レンダリングされていません。現時点では、データを変更できますが、ステータスの更新をトリガーすることはできません。
• 更新: データが更新され、DOM が再レンダリングされました。データは変更できますが、ステータスの更新はトリガーされるべきではありません。
• beforeDestroy: インスタンスはまもなく破棄されます。タイマーのクリアなどのクリーンアップ作業をここで実行できます。
• destroyed: インスタンスは破棄されました。このとき、イベントリスナーのクリアなどのクリーンアップ作業を行う必要があります。

3. フック関数とライフサイクルの使用方法?

Vue では、公式に提供されている API を使用してコンポーネントのフック関数を定義できます。 Vue インスタンスまたはコンポーネントのオプションで、さまざまな段階でフック関数を定義できます。

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
})

フック関数は、インスタンスのライフサイクルのさまざまな段階で自動的に呼び出されます。このようにして、インスタンスを特定の時点で操作できるようになり、コンポーネントをより便利に管理できるようになります。たとえば、作成されたフック関数でデータをリクエストしたり、マウントされたフック関数で DOM ノードを変更したり、beforeDestroy フック関数で作業をクリーンアップしたりできます。

さらに、コンポーネントでフック関数を定義することもできます。コンポーネントのフック関数はインスタンスのフック関数とよく似ており、自動的に呼び出されて特定の操作を実行できます。

Vue.component('my-component', {
  template: '<div>My Component</div>',
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
})

コンポーネントをカプセル化する必要がある場合は、コンポーネントで mixin 拡張機能を使用することもできます。 , そして、ミックスインはコンポーネントのライフサイクルで使用されます。サイクル中にフック関数を自動的に呼び出します:

var mixin = {
  beforeCreate: function () {
    console.log('beforeCreate !')
  },
  created: function () {
    console.log('created !')
  },
  beforeMount: function () {
    console.log('beforeMount !')
  },
  mounted: function () {
    console.log('mounted !')
  },
  beforeUpdate: function () {
    console.log('beforeUpdate !')
  },
  updated: function () {
    console.log('updated !')
  },
  beforeDestroy: function () {
    console.log('beforeDestroy !')
  },
  destroyed: function () {
    console.log('destroyed !')
  }
};

Vue.component('my-component', {
  mixins: [mixin],
  template: '<div>My Component</div>'
})

4. 概要

Vue のフック関数とライフサイクルは、次のことを提供します。コンポーネントの管理と操作のための便利なメカニズム。コンポーネントのライフサイクル中に、特定の操作を実行するフック関数を定義できます。フック関数は、Vue インスタンスまたはコンポーネントのオプションで定義するか、mixin 拡張機能を使用してコンポーネントで定義できます。このようにして、コンポーネントの動作をより正確に制御できるようになり、コンポーネントの管理と変更が容易になります。

以上がVue はフック関数とライフサイクル管理をどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。