Vueでのwatchの使い方を詳しく解説?時計の使い方の紹介

vue では、watch を使用してデータの変更に応答します。時計の使い方は大きく分けて3つあります。次のコードは、watch の簡単な使用法です。

<input type="text" v-model="cityName"/>

new Vue({
  el: '#root',
  data: {
    cityName: 'shanghai'
  },
  watch: {
    cityName(newName, oldName) {      // ...    }
  } 
})

リスニング処理関数を直接記述し、cityName 値が変更されるたびにその関数を実行します。監視対象データの直後にメソッド名を文字列形式で追加することもできます:

watch: {
    cityName: 'nameChange'
    }
 }

immediate および handler

watch を使用する場合このように、最初に値をバインドしたときは listen 関数は実行されず、値が変更された場合にのみ実行されるという特徴があります。値が最初にバインドされるときに関数を実行する必要がある場合は、immediate 属性を使用する必要があります。

たとえば、親コンポーネントが子コンポーネントに動的に値を転送する場合、子コンポーネントの props が最初に親コンポーネントからデフォルト値を取得する場合、その関数も実行する必要があります。 true に設定する必要があります。

new Vue({
  el: '#root',
  data: {
    cityName: ''
  },
  watch: {
    cityName: {
    　　handler(newName, oldName) {
      　　// ...    　　},
    　　immediate: true
    }
  } 
})

監視されたデータは、後でハンドラー メソッドとイミディエイトを含むオブジェクト形式で書き込まれます。前に作成した関数は実際にこのハンドラー メソッドを記述しています。

イミディエイトは、最初にバインドされたときを意味します。 watch , ハンドラーを実行するかどうか. 値が true の場合は、ハンドラー メソッドがウォッチで宣言されたときにすぐに実行されることを意味します. 値が false の場合は、同様にデータが変更されたときに実行されます普通の時計。

deep

オブジェクトの変更を監視する必要がある場合、通常の監視メソッドではオブジェクトの内部属性の変更を監視できません。 , データのみ データのみが変化を検出できる このとき、オブジェクトを深く監視するには deep 属性が必要です。

<input type="text" v-model="cityName.name"/>

new Vue({
  el: '#root',
  data: {
    cityName: {id: 1, name: 'shanghai'}
  },
  watch: {
    cityName: {
      handler(newName, oldName) {      // ...    },
    deep: true,
    immediate: true
    }
  } 
})

cityName.name の変更を監視するには deep: true を設定します。この時点で、このリスナーは cityName のすべてのプロパティに追加されます。オブジェクトに多数のプロパティがある場合、各プロパティ値の変更は実行されたハンドラ。オブジェクト内の 1 つの属性値のみを監視する必要がある場合は、次の最適化を行うことができます: 文字列形式を使用してオブジェクト属性を監視します:

watch: {    'cityName.name': {
      handler(newName, oldName) {      // ...      },
      deep: true,
      immediate: true
    }
  }

この方法では、オブジェクトの特定の属性のみが監視されます。リスナーを追加しました。

配列 (1 次元、多次元) の変更には詳細な監視は必要ありませんが、オブジェクト配列内のオブジェクトのプロパティの変更には詳細な監視が必要です。

以上がVueでのwatchの使い方を詳しく解説?時計の使い方の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。