vue的watch监听对象

在Vue中，watch是一个用于监听数据变化的选项。它可以用来观察一个特定的数据属性，并在该属性发生变化时执行相应的操作。

要使用watch，你需要在Vue组件的选项中定义一个名为watch的对象。该对象的每个属性都是要监听的数据属性，而属性的值可以是一个函数或者一个包含选项的对象。

如果你将watch的属性设置为一个函数，那么这个函数将在被监听的属性发生变化时被调用。函数接收两个参数：新值和旧值。你可以在函数中编写逻辑来处理这些值的变化。

如果你将watch的属性设置为一个对象，那么你可以使用更多的选项来配置监听行为。其中最常用的选项是handler，它是一个函数，用于处理属性变化时的逻辑。除了handler之外，你还可以使用其他选项，如immediate（是否立即执行监听函数）、deep（是否深度监听对象内部的变化）等。

下面是一个示例，展示了如何使用watch来监听一个对象属性的变化：

Vue.component('my-component', {
  data() {
    return {
      obj: {
        name: 'John',
        age: 25
      }
    }
  },
  watch: {
    obj: {
      handler(newVal, oldVal) {
        console.log('obj属性发生变化', newVal, oldVal);
      },
      deep: true
    }
  }
})

在上面的示例中，我们定义了一个名为obj的对象属性，并使用watch来监听它的变化。当obj属性发生变化时，会触发handler函数，并打印出新值和旧值。