watch监听vue2

在Vue.js 2.x中，可以使用watch选项来监听数据的变化。watch选项接受一个对象，其中的每个属性都是要监听的表达式，而属性的值可以是一个回调函数，也可以是一个包含一些选项的对象。

示例代码如下：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function(newVal, oldVal) {
      // 监听message属性的变化
      console.log('message changed', newVal, oldVal);
    }
  }
})

在上面的示例中，我们在watch选项中定义了一个名为message的属性，并指定了一个回调函数。当message属性发生变化时，该回调函数会被触发，并接收到新值和旧值作为参数。

另外，watch选项还可以使用字符串来指定一个方法名或一个要观察的方法的引用。这种情况下，Vue.js会在实例创建时自动绑定对应的方法。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    messageChanged: function(newVal, oldVal) {
      // 监听message属性的变化
      console.log('message changed', newVal, oldVal);
    }
  },
  watch: {
    message: 'messageChanged'
  }
})

需要注意的是，watch选项默认只监听对象或数组的第一层属性的变化，即浅监听。如果要深度监听对象或数组内部的属性变化，可以设置`deep: true`选项。

var app = new Vue({
  el: '#app',
  data: {
    obj: {
      prop1: 'value1',
      prop2: {
        nestedProp: 'value2'
      }
    }
  },
  watch: {
    obj: {
      handler: function(newVal, oldVal) {
        // 监听obj对象及其子属性的变化
        console.log('obj changed', newVal, oldVal);
      },
      deep: true
    }
  }
})

在上面的示例中，我们在watch选项中设置了对`obj`属性的深度监听。当`obj`或其子属性发生变化时，会触发watch中指定的处理函数。

更多关于watch选项的用法和选项配置，请参考Vue.js官方文档中有关watch选项的说明。