vue-watch监视属性

监视属性watch：
1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
  (1).new Vue时传入watch配置
  (2).通过vm.$watch监视

<div id="root">
    <h2>今天天气很{{info}}</h2>
    <button @click="changeWeather">切换天气</button>
</div>

const vm = new Vue({
    el: '#root',
    data: {
	isHot: true,
    },
    computed: {
    info() {
	return this.isHot ? '炎热' : '凉爽'
        }
    },
    methods: {
	changeWeather() {
            this.isHot = !this.isHot
	}
    },
    watch: {
	isHot: {
	immediate: true, //初始化时让handler调用一下
	//handler什么时候调用？当isHot发生改变时。
	handler(newValue, oldValue) { //newValue是改变后的值，oldValue是改变前的值
            console.log('isHot被修改了', newValue, oldValue)
            }
        }
    }
})

深度监视
(1).Vue中的watch默认不监测对象内部值的改变（一层）。
(2).配置deep:true可以监测对象内部值改变（多层）。
备注：
  (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
  (2).使用watch时根据数据的具体结构，决定是否采用深度监视。

const vm = new Vue({
    el:'#root',
    data:{
        isHot:true,
	numbers:{
            a:1,
            b:1,
	}
    },
    
    watch:{
    //监视多级结构中某个属性的变化
	'numbers.a':{    //监测多级结构中的某个属性，必须加引号
        handler(){
            console.log('a被改变了')
            }
        },
    //监视多级结构中所有属性的变化
        numbers:{
            deep:true,   //加上这个语句，该结构中的所有属性的变化都会被检测到
            handler(){
		console.log('numbers改变了')
            }
	}
    }
})

watch简写形式

watch:{
    //正常写法
    isHot:{
        // immediate:true, //初始化时让handler调用一下
        // deep:true,//深度监视
        handler(newValue,oldValue){
            console.log('isHot被修改了',newValue,oldValue)
        }
    }, 
    
    //简写
    isHot(newValue,oldValue){
        console.log('isHot被修改了',newValue,oldValue,this)
    }
}