<p> 年龄:{{ age }}</p>
<button @click="age++">增加年龄</button>
<p> 名称:{{ person.name }}</p>
<button @click="person.name=='李四'">更改姓名</button>
export default{
data(){
return{
age:20,
person:{
name:'张三'
}
}
},
watch:{
//监听基本类型--只要发生操作会实时变化
age(newVal,oldVal){
console.log(newVal)
},
//普通监听--不能监听到复杂类型的
person1(newVal){
console.log(newVal)
},
//深度监听
person(newVal){
handler(newVal,oldVal){
console.log(newVal)
},
deep:true //是否深度监听,默认false,监听会一层层往下遍历,给没一个对象属性增加一个监听器
},
//只监听对象中的某一个属性
'person.name':{
handler(newVal,oldVal){
console.log(newVal)
},
deep:true //是否深度监听,默认false,监听会一层层往下遍历,给没一个对象属性增加一个监听器
}
}
}