vue中侦听器

Vue中的侦听器是一种跟踪数据变化的方法。使用侦听器可以监听指定数据项的变化，并在数据项的值发生变化时执行指定的函数。

侦听器的语法如下：

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

其中，handler是侦听器的回调函数，可以接收两个参数：

• newValue：数据项新的值
• oldValue：数据项旧的值

另外，可以通过deep选项设置是否深度监听对象和数组的变化。

下面是一个例子，用到了侦听器来监听一个数据项的变化：

<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>

在这个例子中，我们监听了num和price两个数据项的变化，并在变化时调用了calcTotal方法来计算总金额。