VUE watch监听器的基本使用方法详解

标题：VUE watch监听器的基本使用方法详解

什么是VUE watch监听器

Vue.js 提供了一个叫做 watch 的属性，用于监听数据的变化，当监听的数据发生变化时，执行回调函数或者做一些其他的操作。

如何在组件中使用VUE watch监听器

在 Vue 组件中使用 watch，需要在组件内部声明一个 watch 配置对象，并指定要监听的数据和该数据改变时触发的回调函数。

以下示例演示了基本的 watch 的使用方法：

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log('count 变为：' + newValue)
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

在上面的代码中，我们定义了一个计数器组件，该组件有一个 data 属性 count，还有一个方法 increment，用于增加 count。然后我们在组件配置对象 watch 中监听了 count 的变化，当 count 改变时，会触发 watch 中定义的回调函数。

值得注意的是，当 VUE 组件被销毁时，自定义的 watch 监听器会自动删除，无需担心内存泄漏问题。

watch 实例

下面我们来进行一个更加复杂的示例，演示 watch 应用的实际场景。

现在我们有一个商品列表，列表中的商品可以被添加、删除、修改。同时，页面中有一个统计总价的栏目，需要在商品变化时自动更新总价。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        <input type="text" v-model="item.name"></input>
        <input type="text" v-model.number="item.price"></input>
        <button @click="remove(item)">删除</button>
      </li>
    </ul>
    <p>总价格：{{ total }}</p>
    <button @click="add">添加商品</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品1', price: 10 },
        { id: 2, name: '商品2', price: 20 },
        { id: 3, name: '商品3', price: 30 }
      ]
    }
  },
  computed: {
    total() {
      return this.items.reduce((total, item) => {
        return total + item.price
      }, 0)
    }
  },
  methods: {
    add() {
      this.items.push({ id: Date.now(), name: '', price: 0 })
    },
    remove(item) {
      const index = this.items.indexOf(item)
      this.items.splice(index, 1)
    }
  },
  watch: {
    items: {
      handler(newItems, oldItems) {
        console.log('商品列表变为：', newItems)
      },
      deep: true
    }
  }
}
</script>

在上面的代码中，我们通过定义了一个 items 数组，该数组中的每一个元素都是一个商品，包含商品名称和商品价格属性。我们在 computed 中定义了一个计算属性 total，用于统计所有商品价格之和。然后我们定义了 add 和 remove 两个方法，用于添加和删除商品。

最后我们定义了一个 watch 监听器，用于监听 items 数组的变化。在监听到变化时，会执行 watch 中定义的回调函数。

值得注意的是，我们在 watch 中设置了 deep 选项，表示要对 items 数组中的每一个元素进行深度监测。否则，当 items 数组中的元素发生变化时，watch 监听器将会无法监听到。