详解Vue中watch的高级用法

Vue中的watch是一个非常重要的属性，它用于监听数据的变化并执行相应的回调函数。除了最基本的用法，Vue中的watch还有一些高级用法，本文将针对这些高级用法进行详细讲解。

watch的基本用法

先来回顾一下watch的基本用法。在Vue实例中使用watch属性来监听某个数据的变化，代码如下所示：

data() {
  return {
    message: '',
  }
},
watch: {
  message(newValue, oldValue) {
    console.log('message发生了变化，新值为' + newValue + '，旧值为' + oldValue)
  },
},

在上面的代码中，当message属性的值发生变化时会触发watch的回调函数。在回调函数中可以获取到新值和旧值，进而执行其他的操作。

监听数组和对象中的内容

除了可以监听基本数据类型的变化之外，Vue中的watch还可以监听数组和对象中的内容的变化。在进行监听时需要设置深度监听深度，代码如下所示：

data() {
  return {
    person: { name: '张三', age: 18, hobbies: ['看书', '下棋'] }
  }
},
watch: {
  'person.hobbies': {
    handler: function(newValue, oldValue) {
      console.log('hobbies发生了变化，新值为' + JSON.stringify(newValue) + '，旧值为' + JSON.stringify(oldValue))
    },
    deep: true
  }
},
methods: {
  addHobby() {
    this.person.hobbies.push('打游戏')
  }
}

在上面的代码中，当person对象中的hobbies数组中的值发生变化时会触发watch的回调函数。在回调函数中可以获取到新值和旧值，进而执行其他的操作。需要注意的是，由于监听的是数组中的内容，所以需要通过设置deep属性为true来实现深度监听。

监听多个属性

在某些情况下，可能需要同时监听多个属性的变化。此时可以通过使用$watch方法来监听多个属性的变化，代码如下所示：

data() {
  return {
    name: '张三',
    age: 18
  }
},
created() {
  this.$watch(
    function () {
      return {
        name: this.name,
        age: this.age
      }
    },
    {
      handler: function (newValue, oldValue) {
        console.log('name或age属性发生了变化，新值为' + JSON.stringify(newValue) + '，旧值为' + JSON.stringify(oldValue))
      },
      deep: true
    }
  )
},
methods: {
  setNameAndAge() {
    this.name = '李四'
    this.age = 20
  }
}

在上面的代码中，通过使用$watch方法，同时监听了name和age的变化。在监听回调函数中，可以获取到新值和旧值，进而执行其他的操作。

总结

本文中，我们通过简单的示例讲解了Vue中watch的三种高级用法：监听数组和对象中的内容、监听多个属性。这些高级用法能够帮助我们更灵活地应对各种业务场景，提高代码的可维护性。