vue2的watch如何使用

在Vue2中，我们可以使用`watch`选项来观察数据的变化。使用`watch`可以监听数据的变化，并在数据发生变化时执行相应的逻辑。

具体使用方法如下：

1. 在Vue实例中添加`watch`选项，该选项是一个对象，键是要观察的数据名称，值是一个函数，用来处理数据变化的逻辑。

new Vue({
  data: {
    message: 'Hello World'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

2. 也可以使用简写方式，将`watch`选项简化为一个函数。

new Vue({
  data: {
    message: 'Hello World'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

3. 可以观察多个数据，只需要在`watch`选项中添加多个观察对象即可。

new Vue({
  data: {
    message: 'Hello World',
    count: 0
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    },
    count: function (newVal, oldVal) {
      console.log('count changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

注意：使用`watch`选项时，需要注意性能问题。如果观察的数据比较多，每次数据变化时都会执行相应的逻辑，可能会造成性能问题。所以，在使用`watch`选项时，需要谨慎使用。