1、普通数据监听
注意:数据需要声明之后使用
<input type="text" v-model="userName"/>
//监听 当userName值发生变化时触发
watch: {
userName (newName, oldName) {
console.log(newName)
}
}
//可以监听数据变化时执行函数
watch: {
'userName':'nameChange '
}
watch: {
userName: {
handler (newName, oldName) {
console.log(newName)
},
immediate: true //第一次绑定的时候执行此监听函数 则需要设置 immediate为true
}
}
methods: {
nameChange () {
console.log()
}
}
2、对象监听
深层次的监听需要设置deep为true,如果对象属性较多可以只监听一个属性:cityName.name’:
<input type="text" v-model="cityName.name" />
data (){
return {
cityName: {name:'北京'}
}
},
watch: {
cityName: {
handler(newName, oldName) {
console.log(newName)
},
immediate: true,
deep: true
}
}