vue项目中使用watch以及属性详解

watch属性

watch属性可以用来监听每一个属性的变化，watch这个对象里面都是函数，函数的名称是data中的属性名称，watch中的函数不需要调用，当属性发生改变那么就会触发watch函数，每个函数都会接受两个值，一个是新值，一个是旧值，我们可以在watch当中就行新旧值的判断来减少虚拟dom的渲染

1，watch 使用方法

1）通过通过watch监听data数据的变化，数据发生变化时，就会打印当前的值
2）通过watch监听docData数据的变化，数据发生变化时，this.change_number++（使用深度监听）

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

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

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

2.详解watch中的immediate和deep属性

（1）immediate

其值是true或false；确认是否以当前的初始值执行handler的函数
不使用immediate属性时的watch监听变量时有一个特点，就是当值第一次绑定时，不会执行监听函数，只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性
（2）deep

其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以监听到。）
当需要监听一个对象的改变时，普通的watch方法只是监听该对象的引用，无法监听到对象内部属性的改变，此时就需要deep属性对对象进行深度监听