vue中watch主要监听data中是
数组
,对象
的值变化
1、watch使用的几种方法
(1)通过watch监听data数据的变化,数据发生变化时,就会打印当前的值
watch: {
data(val, newval) {
console.log(val)
console.log(newval)
}
}
(2)通过watch监听docData数据的变化,数据发生变化时,this.change_number++(使用深度监听)
watch: {
data: 'changeData' // 值可以为methods的方法名
},
methods: {
changeData(curVal,oldVal){
conosle.log(curVal,oldVal)
}
}
2、详解watch中的immediate、handler和deep属性
(1)immediate和handler
这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初
绑定值的时候也执行函数,则就需要
用到immediate
属性。
例如:
watch: {
docData: {
handler(newVal) {
this.change_number++
},
immediate: true
}
}
(2)deep
当需要监听一个对象的改变
时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性
对对象进行深度监听。
例如:
data() {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
},
watch: {
docData: {
handler(newVal) {
this.change_number++
},
deep: true
}
}
设置deep:true则可以监听到docData.doc_id的变化,此时会给docData的所有属性都加上这个监听器,当对象属性较多
时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值
,则可以做以下优化:使用字符串的形式监听对象属性:
例如:
data() {
return {
docData: {
'doc_id': 1,
'tpl_data': 'abc'
}
}
},
watch: {
'docData.doc_id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}
这样只会给对象的某个特定的属性加监听器
3、总结
数组
(一维、多维)的变化不需要
通过深度监听,对象
数组中对象的属性变化则需要deep
深度监听。
感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!