Vue使用watch监听数组或对象

当我们想要监听Vue实例中的属性变化时，我们往往会使用watch来完成，这是Vue提供的强大特性之一。但是，当我们需要监听Vue实例中的数组或对象的变化时，watch就会显得有些无力了。那么，如何使用watch来监听数组和对象的变化呢？在本文中，我将详细讲解Vue如何使用watch监听数组或对象。

监听数组

当我们需要监听一个数组时，Vue提供了一个特殊的方法——Vue.$watch()。该方法可以接收三个参数：要监听的对象，对象变化时的回调函数以及一些配置项。

接下来，我们来看一个示例：

<template>
  <div>
    <p v-for="item in list">{{ item }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: ['苹果', '香蕉', '橘子']
    }
  },
  mounted () {
    this.$watch('list', function (newVal, oldVal) {
      console.log('list变化了', newVal, oldVal)
    }, {
      deep: true
    })
  },
  methods: {
    add () {
      this.list.push('西瓜')
    }
  }
}
</script>

当我们点击add按钮添加了一个新元素后，就会在浏览器控制台中输出list变化了的日志，并显示出list的新值和旧值。这时候，我们就成功监听到了数组的变化。

需要注意的是这里我们传入了一个deep配置，意思是深度监听。这个配置的作用是：当对象的某个属性发生变化时会触发回调函数，从而完成监听。

监听对象

对于对象的监听，也可以使用Vue.$watch()方法来实现，和监听数组比较类似。但是，在监听对象的时候，我们需要注意一件事情：Vue提供了Vue.$set()方法来添加响应式的属性，而不是使用原生的Object.defineProperty()方法。这是因为，这样才能使Vue知道属性的变化，从而正确地响应。

下面是一个监听对象的示例：

<template>
  <div>
    <p>{{ userInfo.name }}</p>
    <p>{{ userInfo.age }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {
        name: '小明',
        age: 18
      }
    }
  },
  mounted () {
    this.$watch('userInfo', function (newVal, oldVal) {
      console.log('userInfo变化了', newVal, oldVal)
    }, {
      deep: true
    })
  },
  methods: {
    changeAge () {
      this.$set(this.userInfo, 'age', 20)
    }
  }
}
</script>

当我们点击changeAge按钮修改userInfo对象中的age属性时，就会在浏览器控制台中输出userInfo变化了的日志，并显示出userInfo的新值和旧值。这时候，我们就成功监听到了对象的变化。

需要注意的是这里我们使用了Vue.$set()方法来修改userInfo对象的age属性。如果我们使用原生的方法修改属性，Vue就无法监听到属性的变化了。

总的来说，Vue提供了强大的watch特性，可以帮助我们监听到实例中属性的变化。当我们需要监听数组或对象时，通过使用Vue.$watch()方法，结合deep配置来实现对数组或对象的深度监听，从而完成响应式的渲染，帮助开发者更好地提升代码的可维护性。