vue2 watch

在Vue2中，可以使用watch来监听数据的变化。通过在watch选项中定义一个或多个属性，当这些属性的值发生变化时，对应的回调函数将被自动调用。[1]

例如，可以通过watch监听一个名为msg的数据的变化：

watch: {
  msg(newValue, oldValue) {
    console.log(oldValue);
    console.log(newValue);
  }
}

在这个例子中，当msg的值发生变化时，回调函数将被调用，并且会传入新值newValue和旧值oldValue作为参数。[2]

除了监听简单的数据类型外，还可以通过设置deep选项来进行深度监听。例如，可以监听一个名为obj的对象的变化，并且深度监听其内部值的改变：

data() {
  return {
    obj: {
      'name': "王",
      'age': 18
    }
  }
},
watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log(oldValue);
      console.log(newValue);
    },
    deep: true // 深度监听
  }
}

在这个例子中，当obj对象的任何属性发生变化时，包括内部值的改变，回调函数都会被调用。[3]

需要注意的是，被Vue管理的函数最好写成普通函数，以确保this指向正确。而不被Vue管理的函数，如定时器的回调函数、ajax的回调函数等，最好写成箭头函数，以确保this指向Vue实例对象或组件实例对象。