深度监视（watch）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
1.深度监视：
1.vue中的watch默认不检测对象内部值的改变
2.配置deep:true可以监测对象内部值的改变
备注：
1.vue自身可以监测对象内部值的改变，但vue提供的watch默认是不可以
2.使用watch时根据数据的具体结构，决定是否采用深度监视
-->
</head>
<body>
<script src="./vue.js"></script>
<div id="root">
<h1>1的值：{{numbers.a}}</h1>
<button @click='numbers.a++'>add</button>
<h1>b的值：{{numbers.b}}</h1>
<button @click='numbers.b++'>add</button>
<br>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el : '#root',
data:{
inHot:true,
numbers:{
a:1,
b:1
}
},
//监视多级结果里某一个属性的变化
watch:{
'numbers.a':{
handler() {
console.log('111')
}
},
//监视多级结果所有属性的变化
numbers:{
//true开启所有属性的变化
deep:true,
handler() {
console.log('number改变')
}
}
},
})
</script>
</body>
</html>
