第一种 普通监听
<input type="text" v-model="userName"/>
//监听 当userName值发生变化时触发
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
第二种 第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,
只有当值改变的时候 才会执行,如果想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true
<input type="text" v-model="userName"/>
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true
}
}
第三种深度监听 当要监听对象或数组的时候需要添加deep:true属性
<input type="text" v-model="cityName.name" />
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
监听多个值
computed: {
dateRange() {
let {wd, sd, cgq, jzc, learn, tb, lccg, zglc, zdlc, kt, cfj, bgd} = this
return {wd, sd, cgq, jzc, learn, tb, lccg, zglc, zdlc, kt, cfj, bgd}
}
},
watch: {
dateRange: {
handler(vul) {
console.log(vul)
},
// immediate: true,
deep: true
}
},