一、watch监听的三个属性
1.handler:watch中监听到数据变化后需要具体执行的方法;
2.immediate:使用watch时有一个特点,就是当值第一次绑定时,不会执行监听函数,只有值发生改变时才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性;
3.deep:当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,此时就需要deep属性对对象进行深度监听,数组字符串一般不需要。
data() {
return {
obj: {
'name': "王",
'age': 18
},
}
},
watch: {
obj: {
// 执行方法
handler(newValue,oldVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度监听
immediate: true // 第一次改变就执行
},
// 如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
'obj.name': {
// 执行方法
handler(newValue,oldVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true, // 深度监听
immediate: true // 第一次改变就执行
}
}
二、常用的几种写法
1.通过watch监听msg数据的变化
watch: {
msg(newValue, oldValue) {
console.log(oldValue)
console.log(newValue)
}
}
2.通过watch监听obj 数据的变化。(深度监听 deep)
data() {
return {
obj: {
'name': "王",
'age': 18
},
}
},
watch: {
obj: {
handler(newValue,oldVal) {
console.log(oldValue)
console.log(newValue)
},
deep: true // 深度监听
}
}
3.通过watch监听data数据的变化,数据发生变化时,执行 change 方法
watch: {
data: 'change' // 值可以为methods的方法名
},
methods: {
change(newValue,oldVal){
console.log(oldVal,newVal)
}
}