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