1.通常情况使用如下:
<input type="text" v-model.lazy="userName" />
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
lazy的作用,在enter键按下或者失去输入框失去焦点后触发
此方法的缺点:当值第一次绑定的时候不会执行监听函数,只有当值改变的时候才会执行;
需求:如果我们想在第一次绑定的时候就执行此监听函数,则需要设置immediate为true.
应用场景:当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要设置immediate:true;
2.以上方法进行优化:
immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。
userName: {
handler(newName, oldName) {
console.log(newName, oldName);
},
immediate: true,
},
3.监听对象
当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。
<input type="text" v-model.lazy="userMsg.weight" />
data (){
return {
userMsg:
{
sex:'女',
weight: '46kg'
}
}
},
watch: {
userMsg: {
handler(newVal, oldVal) {
console.log(newVal)
},
immediate: true,
deep: true
}
}
注意:当监测为对象的时候,newVal == oldVal
此时会给userMsg的所有属性都加上监听函数,如果属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:
watch: {
'userMsg.weight': {
handler(newWeight, oldWeight) {
console.log(newWeight)
},
immediate: true,
deep: true
}
}
注意:
数组的变化不需要深度监听;
在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域.