Vueのウォッチャーの使い方

1年 ago
光, 明
1 minute

VueのWatcherはデータの変化を観測し、それに応じてコールバック関数を呼び出すオブザーバーオブジェクトです。Watcherの使い方は次のとおりです。

  1. Vueインスタンス内で、ウォッチャオブジェクトを作成します。
const vm = new Vue({
data() {
return {
message: 'Hello World'
}
},
watch: {
message(newVal, oldVal) {
console.log('message的值发生了变化：', newVal, oldVal)
}
}
})
  1. watchオプションで監視するデータと対応するコールバック関数を定義します：
watch: {
message(newVal, oldVal) {
console.log('message的值发生了变化：', newVal, oldVal)
}
}
  1. コールバック関数内でデータの変化を処理するロジック：
message(newVal, oldVal) {
console.log('message的值发生了变化：', newVal, oldVal)
}
  1. 彼女の笑顔は、部屋中を明るくした。
  2. oldVal
message(newVal, oldVal) {
console.log('message的值发生了变化：', newVal, oldVal)
}
  1. Watchersは計算プロパティの監視とオブジェクト内の深い変化の追跡にも使用できます。
watch: {
// 监听计算属性
fullName(newVal, oldVal) {
console.log('fullName的值发生了变化：', newVal, oldVal)
},
// 深度监听对象
obj: {
handler(newVal, oldVal) {
console.log('obj的值发生了变化：', newVal, oldVal)
},
deep: true
}
}

Watchersを使ってデータ変化のロジックを処理するには、Vueインスタンスのwatchオプションで監視するデータとコールバック関数を定義すればいい。

bannerAds