Vue监视属性

1.监视属性watch:

1.当被监视的属性变化时,回调函数自动调用,进行相关操作

2.监视的属性必须存在,才能进行监视!!
3.监视的两种写法:
(1).new Vue时传入watch配置

(2).通过vm.$watch监视

简写的条件：只有handler，没有immediate、deep等其他属性

html里直接{{isHot}}

<script type="text/javascript">
	const vm = new Vue({
		el: " #root",
		data:{
			isHot:true,
		},
		//写程序时确定要监视什么属性，用这个
		watch:{
			isHot:{
			immediate:true,//初始化时先让handler调用一次
			//handler什么时候调用?当isHot发生改变时。
			handler(newValue,oldvalue){ //两个参数为修改后的值和修改前的值
				console.log( 'isHot被修改了' ,newValue,oldValue)
			}
		}
	})
		
	//需要后续添加监视属性时用这个
	vm.$watch( "isHot",{
		immediate:true,
		handler(newValue,oldValue){
			console.log( 'isHot被修改了',newValue,oldValue)
		}
	})
</script>

2.深度监视
(1).vue中的watch默认不监测对象内部值的改变（一层）。

(2).配置deep:true可以监测对象内部值改变（多层）。

备注:
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!

(2).使用watchl时根据数据的具体结构,决定是否采用深度监视。

const vm =new Vue({
		el: " #root",
		data:{
			isHot:true,
			numbers:{
				a:1,
				b:1
			}
		},
		watch:{
			numbers:{
				deep:true, //watch默认不监控第二层的数据a,b，只监控第二层的地址值，再深就不管了
//开启deep后，会监视第二层以及之后内容的改变
				handler(){
					console.log("number改变了")
				}
			}
		}
	)}

3.简写

watch:{
    isHot(){
        console.log( 'isHot被修改了',newValue,oldValue)
    }
}


//后续添加监视的简写
	vm.$watch("isHot",function(newValue,oldValue){
		console.log( 'isHot被修改了',newValue,oldValue)
    })