vue.jsでの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

を使用する場合には特徴があります。つまり、値が初めてバインドされるとき、リスニング関数は実行されず、値が変更されたときにのみ実行されます。値が最初にバインドされるときに関数を実行する必要がある場合は、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 次元、多次元) の変更には詳細な監視は必要ありませんが、オブジェクト配列内のオブジェクトのプロパティの変更には詳細な監視が必要です。

関連する推奨事項:

2020 フロントエンド vue インタビューの質問の概要 (回答付き)

vue チュートリアル推奨: 2020 年の最新の vue.js ビデオ チュートリアル 5 選

プログラミング関連の知識の詳細については、プログラミング入門をご覧ください。 ！

以上がvue.jsでのwatchの使い方の詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。