vue 监视属性

<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()}函数，可以将数据改变的情况写出来。