1. watch使用的几种方法
- 通过 watch 监听 data 数据的变化,数据发生变化时,就会打印当前的值
watch: { data(val, value) { console.log(val) console.log(value) } }
- 通过 watch 监听 list 数据的变化,数据发生变化时,this.number++(使用深度监听)
data() { return { list: { 'id': 1, 'type': 0 }, number: 0 } }, watch: { list: { handler(newVal) { this.number++ }, deep: true } }
- 通过 watch 监听 data 数据的变化,数据发生变化时,执行 change 方法
watch: { data: 'change' // 值可以为methods的方法名 }, methods: { change(curVal,oldVal){ console.log(curVal,oldVal) } }
2、watch中的immediate、handler和deep属性
1. immediate 和 handler
这样使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。
data() {
return {
list: {
'id': 1,
'type': 0
},
number: 0
}
},
watch: {
list: {
handler(newVal) {
this.number++
},
immediate: true
}
}
2. deep
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听。
data() {
return {
list: {
'id': 1,
'type': 0
},
number: 0
}
},
watch: {
list: {
handler(newVal) {
this.number++
},
deep: true
}
}
设置deep:true则可以监听到 list.id 的变化,此时会给 list 的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行 handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
data() {
return {
list: {
'id': 1,
'type': 0
}
}
},
watch: {
'list.id': {
handler(newVal, oldVal) {
......
},
deep: true
}
}
这样只会给对象的某个特定的属性加监听器
3、总结
数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听