一、用案例引出监视属性 watch
案例:点击'切换天气'按钮,页面红色文字发生变化(如果是凉爽改为炎热,如果是炎热改为凉爽),同时控制台打印变化日志。

1、普通写法
xml
<h2>今天天气很
<span style="color: red">{{info}}</span>
</h2>
<button @click="changeWeather">切换天气</button>
kotlin
data() {
return {
isHot: false,
};
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
console.log("天气变化了,现在是:" + this.info + ",原来是" + (this.isHot ? "凉爽" : "炎热"));
}
},
2、new Vue时传入watch配置
当属性变化时,回调函数自动调用
,在函数内部进行计算。
xml
<h2>今天天气很
<span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>
javascript
data() {
return {
isHot: false,
};
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
watch: {
info: {
handler(newValue, oldValue) {
console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
},
},
},
3、通过vm.$watch监视
两种watch用法,handler内部写法一致
xml
<h2>今天天气很
<span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>
javascript
const vm = new Vue({
el: "#app",
data() {
return {
isHot: false,
};
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
});
vm.$watch("info", {
handler(newValue, oldValue) {
console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
},
});
二、watch 的特点
-
- 当被监视的属性发生变化时,回调函数自动调用,进行相关操作;
-
- 监视的属性必须存在,才能进行监视!!
-
- 监视的两种写法:
1)new Vue时传入watch配置
2)通过vm.$watch监视
三、watch 属性的选项
immediate: true
:表示在监听开始时立即执行回调函数,而不是等到数据变化时才执行。deep: true
:表示深度监听,适用于监听对象或数组的变化。
javascript
watch: {
info: {
immediate:true,//默认false。改为true表示立即执行回调函数。
deep:true,// 默认false。深度监听,适用于监听对象或数组
handler(newValue, oldValue) {
console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
},
},
},
四、watch 监视属性简写
- 当配置项只有handler时,可以简写
- 不能写成箭头函数
1、new Vue时传入watch配置(简写)
javascript
watch: {
info(newValue, oldValue) {
console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
},
},
2、通过vm.$watch监视(简写)
javascript
vm.$watch("info", function (newValue, oldValue) {
console.log("天气变化了,现在是:" + newValue + ",原来是" + oldValue);
});
五、watch 深度监视特点
1、深度监听特点
- 1.vue中的
watch
默认不监测对象内部值的改变(一层)。 - 2.配置
deep:true
可以监测对象内部值的改变(多层)。
2、深度监听案例

less
<h3>a的值是{{numbers.a}}</h3>
<button @click="numbers.a++">点我a+1</button>
<h3>b的值是{{numbers.b}}</h3>
<button @click="numbers.b++">点我b+1</button>
css
data() {
return {
numbers: {
a: 1,
b: 1,
},
};
},
实现一:只监视a,不监视b(监视多级结构中某个属性的变化)
javascript
watch: {
// 只监视a,不监视b
'numbers.a': {
handler(newValue, oldValue) {
console.log(newValue,oldValue);
},
},
},
实现二:深度监听number变化(监视多级结构中所有属性的变化)
javascript
watch: {
//深度监听
'numbers': {
deep:true,//开启深度监听
handler(newValue, oldValue) {
console.log('numbers变化了');
},
},
},
3、备注
-
1.vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以(为了效率)。
-
2.使用watch时根据数据的具体结构,决定是否采用深度监听。