基础案例代码片段，这里，主要是监视isHot变量的变化。
const vm = new Vue({
el:"#root",
data:{
isHot:true
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
/* watch:{ //可以监测data、computed里的属性
isHot:{
immediate:true, //初始化时，立即调用一次handler
//当isHot发生改变时，被调用。
handler(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
}
}
}*/
});
//监视方式2，这种方式，可以根据用户的行为，来修改监视对象
vm.$watch('isHot',{
immediate:true, //初始化时，立即调用一次handler
//当isHot发生改变时，被调用。
handler(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
}
});
深度监视：
1、Vue中的watch默认不监视对象内部的改变（一层）
2、配置deep:true可以监测对象内部的改变（多层）
备注：
1、Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以。
2、使用watch时根据数据的具体结构，决定是否采用深度监测。
属性的层级是多层：
这里监视numbers
data:{
isHot:true,
numbers:{
a:1,
b:1
}
},
增加配置deep:true
watch:{ //可以监测data、computed里的属性
//监视多级属性中的任一属性的变化
'numbers':{
deep:true,
handler(newVal, oldVal) {
console.log('numbers被修改了！',newVal, oldVal);
}
}
}
要求监视的配置项中只有handler函数时，才可以简写。
Vue对象内部的简写方式
isHot(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
}
Vue对象外部的简写方式
vm.$watch('isHot',function (newVal,oldVal) {
console.log('isHot被修改了！',newVal,oldVal);
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气案例_深度监视_简写</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<button @click="changeWeather">切换天气</button>
</div>
</body>
<script>
const vm = new Vue({
el:"#root",
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽';
}
},
methods:{
changeWeather(){
this.isHot = !this.isHot;
}
},
watch:{ //可以监测data、computed里的属性
//完整写法
/* isHot:{
// immediate:true, //初始化时，立即调用一次handler
// deep:true, //深度监视
//当isHot发生改变时，被调用。
handler(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
}
},*/
//简写 要求监视的配置项中只有handler函数时，才可以简写。
/* isHot(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
},*/
}
});
//完整写法
/* vm.$watch('isHot',{
immediate:true, //初始化时，立即调用一次handler
deep:true, //深度监视
//当isHot发生改变时，被调用。
handler(newVal,oldVal){
console.log('isHot被修改了！',newVal,oldVal);
}
});*/
//简写
vm.$watch('isHot',function (newVal,oldVal) {
console.log('isHot被修改了！',newVal,oldVal);
})
</script>
</html>