vue 监视属性

今天天气很{{info}}

<button @click="changeWeather">切换天气

---

a的值是{{numbers.a}}

<button @click="add">点我让a+1

b的值是{{numbers.b}}

<button @click="numbers.b++">点我让b+1

const vm = new Vue({ data(){ return{isHot:true, numbers:{a:1,b:1} }},

computed:{
info(){
return this.isHot?'炎热':'凉爽'
}
},

methods: {
changeWeather(){
this.isHot = !this.isHot //取反
},
add(){this.numbers.a ++}
},

watch:{
info:{ //handler函数将在isHot/info被修改时调用，同时返回修改前后的值
handler(newValue,oldValue){
console.log('info被修改了',newValue,oldValue)
}
},
'numbers.a':{ //这种还要带.的var要记得带引号
handler(newValue,oldValue){
console.log('a改变了',newValue,oldValue)
}
},
numbers:{
deep:true, //深度监视，numbers中的任意元素（a或b）发生改变时，numbers会被监视到。
handler(){
console.log('numbers改变了')
}
}

},
})
在vm中新建一个 watch 的类，类中的元素为被监视的对象，该元素也是一个类，类中包含一个handler(newValue,oldValue){console.log()}函数，可以将数据改变的情况写出来。