- 简单监听
//html
<input type="text" v-model="name">
//vue-js
export default {
name: "test",
data() {
return {
name: "原始"
};
},
watch: {
name(newVal, oldVal) { //第一个参数为修改后的新值,第二个为原来的值
console.log(newVal + "--" + oldVal);
}
}
};
- 最初绑定的时候就执行(immediate属性)
watch: {
name: {
//watch方法默认写的就是handle,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。
handler(newVal, oldVal) {
console.log(newVal+"-"+oldVal)
},
// 代表在wacth里声明了name这个方法之后立即先去执行handler方法
immediate: true
}
}
- 深度监听(deep)
- 背景:默认情况下handler只监听name这个属性引用的变化,只有给name赋值的时候才会监听到。比如:
mounted: {
this.name = {
a: '名字'
}
}
- 如果想监听对象下的属性,就需要使用deep:true进行深度监听
watch: {
name: { // name 是一个对象名
//watch方法默认写的就是handle,Vue.js会去处理这个逻辑,最终编译出来其实就是这个handler。
handler(newVal, oldVal) {
console.log(newVal+"-"+oldVal)
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true,
deep: true //进行深度监听
}
}
- 给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。优化:使用字符串形式监听
watch: {
//优化
'name.a': {
handler(newVal, oldVal) {
console.log(newVal,oldVal)
},
// 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
immediate: true,
deep:true
}
}