vue，watch监听数据，数据监听

vue，watch监听数据，数据监听

三个值：

1.第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
2.第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
3.第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

1、watch使用的几种方法

（1）通过watch监听data数据的变化

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

（2）通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听）

watch: {
  docData: {
   handler(newVal) {
    consle.log(newVal)
   },
   deep: true
  }
}

（3）通过watch监听data数据的变化，数据发生变化时，执行方法

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

2、immediate、handler和deep属性

（1）immediate和handler

在最初绑定值的时候也执行监听，则就需要用到immediate属性。

watch: {
  docData: {
    handler(newVal) {
      this.change_number++
    },
    immediate: true
  }
}

（2）deep

深度监听，监听对象的属性

watch: {
   docData: {
    handler(newVal) {
      console.log(newVal)
    },
    deep: true
  }  
}

设置deep:true则可以监听到对象中的属性的变化，例如data.data_id，如果监听整个data那么消耗会大，因此直接监听改变的那个值：

watch: {
  'data.data_id': {
    handler(newVal, oldVal) {
      console.log(newVal)
      console.log(oldVal)
    },
    deep: true
  }  
}