vue のリスナー

Vue のリスナーは、データの変更を追跡する方法です。リスナーを使用して、指定されたデータ項目の変更をリッスンし、データ項目の値が変更されたときに指定された関数を実行します。

リスナーの構文は次のとおりです。

watch: {
  数据项名: {
    handler: function(newValue, oldValue) {
      // 处理数据变化的逻辑
    },
    deep: true
  }
}

このうち、handler はリスナーのコールバック関数であり、次の 2 つのパラメータを受け取ることができます。

• newValue: データ項目の新しい値
• oldValue: データ項目の古い値

さらに、詳細オプションを使用して、オブジェクトおよび配列の変更を詳細に監視するかどうかを設定できます。

以下は、リスナーを使用してデータ項目の変更を監視する例です。

<template>
  <div>
    <p>总金额：{
   
   { total }}</p>
    <input v-model="num" placeholder="请输入商品数量" />
    <input v-model="price" placeholder="请输入商品单价" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
      price: 0,
      total: 0
    }
  },
  watch: {
    num: {
      handler() {
        this.calcTotal()
      }
    },
    price: {
      handler() {
        this.calcTotal()
      }
    }
  },
  methods: {
    calcTotal() {
      this.total = this.num * this.price
    }
  }
}
</script>

この例では、2 つのデータ項目 num とprice の変化を監視し、それらが変化したときに calcTotal メソッドを呼び出して合計金額を計算します。