wacth在vue2的写法

在Vue2中，watch的写法有两种，一种是直接在组件选项中定义watch属性，另一种是使用$watch方法。下面分别介绍这两种写法：

1. 直接在组件选项中定义watch属性：

export default {
  data() {
    return {
      obj: {
        a: 111,
        b: 222
      }
    }
  },
  watch: {
    'obj.a': function(newVal, oldVal) {
      console.log('obj.a changed from', oldVal, 'to', newVal)
    },
    'obj.b': function(newVal, oldVal) {
      console.log('obj.b changed from', oldVal, 'to', newVal)
    }
  }
}

2. 使用$watch方法：

export default {
  data() {
    return {
      obj: {
        a: 111,
        b: 222
      }
    }
  },
  mounted() {
    this.$watch('obj', (newVal, oldVal) => {
      console.log('obj changed from', oldVal, 'to', newVal)
    }, { deep: true })
  }
}

其中，第一种写法中，watch属性是一个对象，对象的属性名是要监听的表达式，属性值是一个函数，用于处理表达式变化时的逻辑。如果要监听嵌套对象的属性，可以使用点号来连接属性名，如上面的例子中的'obj.a'和'obj.b'。

第二种写法中，$watch方法接收三个参数，第一个参数是要监听的表达式，第二个参数是表达式变化时的回调函数，第三个参数是一个选项对象，用于指定是否深度监听。在这种写法中，可以监听任意表达式，包括计算属性和方法的返回值。