在Vue中,用watch来响应数据的变化
<input type="text" v-model="userName"/>
>第一种
//监听 当userName值发生变化时触发
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
第一种有一个缺点 就是当值第一次绑定的时候 不会执行监听函数,
只有当值改变的时候 才会执行
如果我们想在第一次绑定的时候执行此监听函数 则需要 设置
immediate为true
第二种
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
}
}
此时会给cityName的所有属性都加上监听函数,如果属性较多时 可以使用如下
watch: {
'cityName.name': {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}
注 数组的变化不需要深度监听