作用：观察和响应 Vue 实例上的数据变动
1、当侦听的属性发生变化时，回调函数被调用，进行相关操作
2、侦听的属性必须存在才可进行侦听
3、侦听的两种写法
今天天气很{{info}}
<button @click="changeWeather">切换天气
Vue.config.productionTip = false;
var vm = new Vue({
el: "#box",
data: {
isHot: true,
},
methods: {
changeWeather() {
this.isHot = !this.isHot;
},
},
computed: {
info() {
return this.isHot ? "炎热" : "凉爽";
},
},
1、在Vue实例中进行配置
watch:{
isHot:{
// immediate:true, 初始化时调用handler
// handler 调用时机：当isHot发生改变时
handler(newValue,oldValue){
console.log('handler oldValue', oldValue)
console.log('handler newValue', newValue)
}
},
info:{
// immediate:true, 初始化时调用handler
// handler 调用时机：当info发生改变时
handler(newValue,oldValue){
console.log('handler oldValue', oldValue)
console.log('handler newValue', newValue)
}
}
}
2、通过$watch方法对实例对象进行绑定
vm.$watch("isHot", {
handler(newValue, oldValue) {
console.log("handler oldValue", oldValue);
console.log("handler newValue", newValue);
},
});
深度侦听
-
Vue中watch默认不可侦听对象内部值的改变（默认只侦听一层）
-
配合deep：true可侦听对象内部值的改变（可侦听多层）
备注：
-
Vue自身可侦听对象内部值的改变
-
使用watch时根据数据的具体结构决定是否采用深度侦听
a的值为：{{numbers.a}}
<button @click="numbers.a++">点我a自增
b的值为：{{numbers.b}}
<button @click="numbers.b+=2">点我b加2
data: {
isHot: true,
numbers:{
a:1,
b:2
}
},
watch:{
// 监视多级结构中某个属性的变化
'numbers.a':{
handler(){
console.log('a自增1');
}
},
// 监视多级结构中所有属性的变化
numbers:{
deep:true,
handler(){
console.log('numbers改变了');
}
}
}
简写形式
1、在watch配置
watch: {
// 完整形式
isHot: {
handler(newValue, oldValue) {
console.log("handler oldValue", oldValue);
console.log("handler newValue", newValue);
},
},
// 简写
isHot(newValue, oldValue) {
console.log("handler oldValue", oldValue);
console.log("handler newValue", newValue);
},
},
2、使用vm.$watch()方法
// 完整形式
vm.$watch("isHot", {
handler(newValue, oldValue) {
console.log("handler oldValue", oldValue);
console.log("handler newValue", newValue);
},
});
// 简写
vm.$watch("isHot", function (newValue, oldValue) {
console.log("handler oldValue", oldValue);
console.log("handler newValue", newValue);
});
