<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../js/vue.js"></script>
<title>监视属性深度监视</title>
</head>
<body>
<!-- vue中的watch 默认不监视对象属性中的内部值的改变
配置deep：true可以监视对象内部值的改变（多层）
备注：
vue自身可以检测对象内部值改变，但是vue提供的watch默认不可以
使用watch需要根据对象的结构决定是否采用深度监视
-->
<div id="root">
<h1>今天天气{{inFo}}</h1>
<!-- 绑定事件的时候，事件 @xxx="yyy",yyy可以写一些简单的语句 -->
<!-- <button @click="isHot=!isHot">切换天气</button> -->
<button @click="chang">切换天气</button
><br>
<h1>a的值是{{numbers.a}}</h1>
<button @click="numbers.a++">点我a+1</button>
<br>
<h1>b的值是{{numbers.b}}</h1>
<button @click="numbers.b++">点我b+1</button>
</div>
<script>
const vm=new Vue({
el:"#root",
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
methods: {
chang(){
this.isHot=!this.isHot;
}
},
computed:{
inFo(){
return this.isHot ? '炎热' : '凉爽';
}
},
watch:{
isHot:{
// immediate:true,//初始化时让handler调用一下
//handler在isHot发生改变时触发
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
},
/* //监视多级结构中某个属性的变化
"numbers.a":{
handler(){
}
} */
//监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
}
}
}
})
// vm.$watch("isHot",{
// // immediate:true,//初始化时让handler调用一下
// //handler在isHot发生改变时触发
// handler(newValue, oldValue) {
// console.log(newValue, oldValue)
// }
// })
</script>
</body>
</html>
