vue中监听数据变化watch的全面解析（三种方法）转载

watch是 一个对象 ，对象具有 键 跟 值 ，

键 是我们想要 受监控的数据 ，

该值可以是一个函数 ： 当我们受监控的数据发生变化时，需要执行的函数，这个函数有两个形参，第一个是当前的值，第二个是变化后的值； 举例如（ps1）

值也可以是method中的函数名称 ： 函数名称应用引号括起来； 举例如（ps3）

该值也可以是包含选项的对象。 ：老，老，老

这些选项包括三个：

A，第一个值handle：它的值是一个回调函数，该函数是监听对象对话时需要执行的函数。

B，第二个值deep：其值true 或者 false，是否深度监听(一般监听不能监听对象属性值的变化，数组除外)

C，第三个值immediate：其值 true 或者 false，是否按当前初始值执行。handle函数(第一次绑定值时，不会执行侦听函数，只有在值发生变化时才会执行。如果我们在最初绑定值时需要执行该函数，则需要使用它。immediate财产。)。

举例如（ps2）

（ps1）通过watch监听data当数据更改时，会打印当前值。

watch: {
  data(val, newval) {
    console.log(val)
    console.log(newval)
  }
 }

（ps2）通过watch监听data数据的变化，当数据变化时，this.change_number++(使用深度倾听)

watch: {
  data: {
   handler(newVal) {
    this.change_number++
   },
   deep: true,
　　immediate: false,
  }
}

（ps3）通过watch监听data当数据更改时，数据中的更改,执行changeData方法

watch: {
  data： changeData // 值可以为methods的方法名
}，
methods: {
   changeData(curVal,oldVal){
  　　　 conosle.log(curVal,oldVal)
　　}
}