详解Vue中watch对象内属性的方法

当我们需要对Vue实例中的某个数据进行观察，以便在数据发生变化时执行一些操作时，我们可以使用Vue中的“watch”属性。如果需要观察的是对象内的属性，我们需要使用特殊的方法来观察内部属性的变化。

以下是详解Vue中watch对象内属性的方法的完整攻略：

1. 监听深层次对象内属性的变化

在Vue中，某些情况下我们需要深层次的监听对象内属性的变化，我们可以通过使用deep选项来达成此目的。

watch: {
  'person.age': {
    handler: function (newVal, oldVal) {
      console.log('person.age 从 ' + oldVal + ' 变成了 ' + newVal)
    },
    deep: true
  }
}

在上述示例中，当person对象内的age属性发生变化时，watch选项会监听到这一变化，并执行相应的操作。

2. 监听数组元素的变化

Vue中提供了一个特殊的观察数组的方法$watch，我们可以使用该方法来监听数组元素的变化。

watch: {
  myArray: function (newVal, oldVal) {
    console.log('myArray 发生变化')
  }
},
created: function() {
  this.$watch('myArray', function(newVal, oldVal) {
    console.log('myArray内元素发生变化')
  }, { deep: true })
}

在以上示例中，我们在watch选项中监听对象myArray的变化，并在created钩子中使用Vue提供的$watch方法来监听数组内部元素的变化。

通过以上两个示例，我们可以深入了解Vue中监控对象内属性发生变化的各项特性，实际应用时可以根据自己的需求进行更加灵活的操作。