侦听器
监听 实例上的 某个属性的值得变化
const vm = new Vue({
el:"#app",
data:{
msg:"",
obj:{
a:10,
b:20
}
},
watch:{
msg(newVal, oldVal){
console.log(`值变化了,新值是${newVal},旧值是${oldVal}`)
// 监听的是非对象的数据 直接在watch中新增一个同名的方法即可
},
// 监听对象
"obj.a"(newVal, oldVal){
console.log(`值变化了,新值是${newVal},旧值是${oldVal}`)
/*
监听对象 直接新增同名方法无法监听,
方法1,直接监听该对象的属性
新增 "对象.属性"(){} 这样方法
*/
},
// 监听对象 深度监听
obj:{
handler(newVal,oldVal){
//只能获取到新的值,不管是newVal还是oldVal
},
deep:true
}
}
})
例子:
<div id="app">
<input type="text" v-model="msg">
{{msg}}
<input type="text" v-model="obj.a">
{{obj.a}}
</div>
<script type="text/javascript">
const vm= new Vue({
el:"#app",
data:{
msg:"",
obj:{
a:10,b:20
}
},
watch:{
msg(newVal,oldVal){
console.log("变化了,新值是"+newVal+"旧值是"+oldVal);
},
"obj.a"(newVal,oldVal){
console.log("变化了,新值是"+newVal+"旧值是"+oldVal);
},
obj:{
handler(oldVal,newVal){
console.log(newVal,oldVal);
},
deep:true
}
}
})
</script>