监视属性(watch)：
1.当被监视的属性变化时，回调函数(handler)自动调用，进行相关操作。
2.监视的属性必须存在，才能进行监视！！
3.监视的两种写法：
(1).new Vue时传入watch配置
(2).通过vm.$watch监视
handler
在Vue中，handler方法是用于处理监听属性变化的函数。它通常与watch属性一起使用，用于监控数据的变化并执行相应的操作。handler方法可以帮助我们将处理逻辑抽象出来，以便复用和维护。
可传递参数：
newValue、oldValue（参数名可以自定义），但是第一个是修改后的属性值，第二个是原先的属性值
immediate(布尔值)
immediate：立即的、马上的、立刻执行的。默认为 false。
作用：初始化时让handler先调用一下。
深度监视(deep)：
(1).Vue中的watch默认不监测对象内部值的改变。
(2).配置deep:true可以监测对象内部值改变(多层级结构监视)。
备注：
(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
监视的简写形式
前提条件：不需要immediate和deep属性，只需要handler时可简写。
watch:{
isHot(){
....
}
}
或者：
vm.$watch("isHot", function(){
...
})
举例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../js/vue.js"></script>
<title>天气案例</title>
</head>
<body>
<div id="root">
<h2>今天天气很{{info}}</h2>
<!-- 绑定事件的时候：@xxx = "yyy" 中的 yyy 可以写一些简单的语句 -->
<!-- 下面的语句可简写成： <button @click = isHot = !isHot;>改变天气</button> -->
<button @click=changeWeacher>改变天气</button>
<h2>a的值是：{{numbers.a}}</h2>
<button @click="numbers.a++">点一次加1</button>
</div>
</body>
<script>
const vm = new Vue({
el: "#root",
data: {
isHot: true,
numbers: {
a: 1,
b: 1
}
},
computed: {
info() {
return this.isHot ? '炎热' : '凉爽';
}
},
methods: {
changeWeacher() {
this.isHot = !this.isHot;
}
},
watch: {
// 监视计算属性的变化（info）
info: {
// 初始化时让handler调用一下。immediate：立即的、马上的、立刻执行的。
immediate: true,
// handler什么时候调用？当info发生改变时。
handler(newValue, oldValue) {
console.log("info被修改了, 新值为：" + newValue, "旧值：" + oldValue)
}
},
// 监视多级结构中某个属性的变化（numbers.a）
'numbers.a': {
handler(newValue, oldValue) {
console.log("a的值改变了,新值为：" + newValue, "旧值：" + oldValue)
}
},
// 监视多级结构中所有属性的变化（numbers.a、numbers.b等等）
'numbers': {
// 深度监视开启
deep: true,
handler() {
console.log("numbers对象里有的值改变了")
}
}
}
})
// 正常写法
vm.$watch('isHot', {
// immediate: true,
// deep:true,
handler(newValue, oldValue) {
console.log("监视isHot变化", "新值为：" + newValue, "旧值：" + oldValue)
}
})
// 简写形式
vm.$watch('isHot',
function (newValue, oldValue) {
console.log("【监视isHot值，代码简写】", "新值为：" + newValue, "旧值：" + oldValue)
}
)
// 以上监视numbers.a的简写形式
// 'numbers.a'(newValue, oldValue) {
// console.log("【监视a值代码简写】新值为：" + newValue, "旧值：" + oldValue)
// },
</script>
</html>
点击 “改变天气” 后。。。
点击 “点一次加1” 后 。。。
