<div id="root"><h2>今天天气很{{info}}</h2><button @click="changeWeather">切换天气</button><hr/><h3>a的值是{{numbers.a}}</h3><button @click="add">点我让a+1</button><h3>b的值是{{numbers.b}}</h3><button @click="numbers.b++">点我让b+1</button>
</div>
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()}函数,可以将数据改变的情况写出来。