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

  }