Vue で watch を使用して複数のデータの変更を監視する方法

Vue は、非常に便利なデータ バインディング メカニズムを提供する人気のある JavaScript フレームワークです。 Vue の監視オブジェクトは非常に重要な機能であり、単一または複数のデータの変更を監視するのに役立ちます。この記事では、Vue で監視オブジェクトを使用して複数のデータの変更を監視する方法について説明します。

まず、Vue の watch オブジェクトが何であるかを理解する必要があります。監視オブジェクトは、データの変更を監視するために Vue コンポーネントで使用されるオプションです。 watch オプションを使用して式の値を監視でき、式の値が変化すると、watch は対応するコールバック関数を自動的に実行します。 Vue では、監視オブジェクトを文字列、関数、またはオブジェクトとして指定できます。この記事では、オブジェクトを使用して監視オプションを指定します。

message と count という 2 つのデータ プロパティを含む Vue コンポーネントがあるとします。これら 2 つのデータの変更をリッスンし、ページ上の対応する要素を更新したいと考えています。まず、コンポーネントのオプションに監視オブジェクトを追加する必要があります。

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello',
      count: 0
    }
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  },
  template: '<div>{{ message }} {{ count }}</div>'
})

上記のコードでは、Vue コンポーネントのオプションに監視オブジェクトを追加します。この監視オブジェクトには、それぞれメッセージ データ属性とカウント データ属性に対応する 2 つの属性があります。各プロパティには、その値として匿名関数があります。これら 2 つの関数は、対応するデータ属性が変更されるたびに呼び出されます。どちらの関数も、新しい値と古い値の 2 つのパラメータを受け入れます。これらの関数内で必要なコードを実行できます。上の例では、単にメッセージをコンソールに出力しました。

深度監視オプションを使用して、複数のデータ層を監視することもできます。 Vue の詳細な監視とは、オブジェクトまたは配列プロパティの値が変更された場合にのみ監視コールバックがトリガーされることを意味します。 Vue では、デフォルトでデータ変更の 1 つのレイヤーのみを検出できます。監視オブジェクト内のマルチレイヤー データの変更を監視する必要がある場合は、属性名に深度文字 ($) を追加する必要があります。

Vue.component('my-component', {
  data: function () {
    return {
      person: {
        name: 'Bob',
        age: 30
      }
    }
  },
  watch: {
    'person.name': {
      handler: function (newVal, oldVal) {
        console.log('person.name changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    },
    'person.age': {
      handler: function (newVal, oldVal) {
        console.log('person.age changed from ' + oldVal + ' to ' + newVal)
      },
      deep: true
    }
  },
  template: '<div>{{ person.name }} {{ person.age }}</div>'
})

この例では、人物オブジェクトの名前と年齢属性の変化を監視します。 person オブジェクトはネストされたオブジェクトであるため、Vue がこれらの属性の変化を詳細に監視できるように、属性名の前に深さ文字を追加する必要があります。

この記事では、Vue で監視オブジェクトを使用して複数のデータの変更を監視する方法を紹介します。 watch オプションを使用して 1 つのデータの変更を監視する方法と、deep watch オプションを使用してオブジェクトまたは配列プロパティの変更を監視する方法について説明しました。 Vue では、watch は非常に実用的な機能であり、データの変更を簡単に監視し、対応する操作を実行できます。

以上がVue で watch を使用して複数のデータの変更を監視する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。