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} }

如果觉得《vue watch监听数据 数据监听》对你有帮助，请点赞、收藏，并留下你的观点哦！