vue watch监听

Vue的watch选项可以用来监听Vue实例中的数据变化，并在数据变化时执行相应的回调函数。它可以用于处理异步操作、复杂的数据计算、数据联动等场景。

在Vue实例的watch选项中，我们可以定义一个或多个属性和相应的回调函数。当所监听的属性发生变化时，Vue会自动调用相应的回调函数。

下面是一个示例：

new Vue({
  data: {
    message: 'Hello Vue!',
    count: 0
  },
  watch: {
    message: function(newValue, oldValue) {
      // 当message属性发生变化时，执行回调函数
      console.log('message属性发生变化：', newValue, oldValue);
    },
    count: {
      handler: function(newValue, oldValue) {
        // 当count属性发生变化时，执行回调函数
        console.log('count属性发生变化：', newValue, oldValue);
      },
      immediate: true // 初始化时立即执行回调函数
    }
  }
})

在上面的示例中，我们定义了两个属性message和count的监听器。当message属性发生变化时，会执行相应的回调函数，并打印出新值和旧值。同样地，当count属性发生变化时，也会执行相应的回调函数。

需要注意的是，回调函数接收两个参数，分别是新值和旧值。我们可以根据需要在回调函数中进行相应的操作，比如发送网络请求、更新其他数据等。

除了直接在Vue实例中定义watch选项外，我们还可以使用this.$watch方法来动态地添加监听器。例如：

this.$watch('message', function(newValue, oldValue) {
  console.log('message属性发生变化：', newValue, oldValue);
});

通过this.$watch方法添加的监听器可以在组件销毁时自动移除，避免内存泄漏问题。