Vue でのリスナーウォッチの使用法

vue 設定オブジェクト内の属性である listen 属性は、データの変更に応答します。ここでのデータは、データ内のデータを指し、計算されます。これは、データの監視に相当します。データが変更されると、データ内の対応するものがすぐに実行されます。リスナー関数。リスナーウォッチは、Vue インスタンス上のデータ変更を監視し、それに応答するために Vue によって提供されるプロパティです。監視データが変化すると、対応するリスニング機能がトリガーされます。

Listener-Vue インスタンス-CSDNVue 入門スキルツリー

watch:{
        key:value,
        //key值就是要侦听的数据名字
        //value:5种类型（最常用的也就是函数类型）
        }

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 属性を使用する必要があります。

例えば、親コンポーネントが子コンポーネントに動的に値を渡す場合、子コンポーネントの props が初めて親コンポーネントからデフォルト値を取得するときにも関数を実行する必要があります。このとき、immediate は実行する必要があります。 true に設定する必要があります。

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

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

immediate は、ウォッチが初めてバインドされたときにハンドラーを実行するかどうかを示します。値は true です。これは、ウォッチが宣言されたときにハンドラーメソッドがすぐに実行されることを意味します。値は false で、一般的なメソッドと同じです。データ変更時のみハンドラを実行してください。

深い

オブジェクトの変更を監視する必要がある場合、通常のwatchメソッドではオブジェクトの内部プロパティの変更を監視できず、データ内のデータのみ変更を監視できます。このとき、監視するには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
    }
  }
})

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

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

これにより、オブジェクトの特定のプロパティにリスナーが追加されるだけです。

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

Vue でのリスナー ウォッチの使用法

即時および取引

深い

おすすめ

Vue でのリスナーウォッチの使用法