- 当被监视的属性变化时，回调函数自动调用，进行相关操作
- 监视的属性必须存在，才能进行监视
- 监视的两种不同写法（请看 基本用法区域）
基本用法
写法1：
<div id="root">
<h2>今天的天气很{{result}}</h2>
<input type="button" value="切换" @click="change">
</div>
<script>
new Vue({
data() {
return {
isHot: true
}
},
computed: {
result() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
change() { this.isHot = !this.isHot }
},
watch:{
result:{
immediate:true, //初始化时让handler调用下
handler(newValue,oldValue){
console.log('现在是:'+ newValue + ';' + '原本是:'+ oldValue )
}
}
}
}).$mount('#root')
</script>
PS：handler方法 和 immediate 属性 在什么时候用呢？ 答案是：在值最初时候watch就执行
写法2（非创建实例时）：
const vm = new Vue({
data() {
return {
isHot: true
}
},
computed: {
result() {
return this.isHot ? '炎热' : '凉爽'
}
},
methods: {
change() { this.isHot = !this.isHot }
}
}).$mount('#root')
vm.$watch('isHot', {
immediate: true,
handler(newValue, oldValue) {
console.log(newValue + '!')
}
})
这个方法是在创建实例的时候不知道监视什么，后续用户调用的时候发现需要监视，那么就用这个方法即可
简写（不调用deep和immediate时可使用）
例：
watch:{
result(){
console.log('现在是:'+ newValue + ';' + '原本是:'+ oldValue )
}
}
深度监视
- （1）Vue中的 watch 默认不监测对象内部值的改变（只有一层监视）
- （2） 配置deep:true 可以监测对象内部值改变（配置就开启多层监视）
- 备注：Vue自身是可以监测到对象内部值的改变的，但是 Vue 提供的 watch 默认是不可以的，我们根据数据的具体结构，决定是否采用深度监视
例：
<div id="root">
<h2>a:{{numbers.a}}</h2>
<input type="button" value="+1" @click="numbers.a++">
</div>
<script>
new Vue({
data() {
return {
numbers:{
a:2,
b:1
}
}
},
watch:{
numbers:{
deep:true,
immediate:true,
handler(){
console.log('a,改变了')
}
}
}
}).$mount('#root')
总结下：
（1）handler 函数是当监视对象发生改变时调用
（2）immediate 默认为false ，开启为true。作用是初始化时就让 handler 调用一下（一刷新 handler就立刻运行一次）
（3）deep 默认为false ，开启为true。开启后作用是深度监视
