一.监视属性
1.配置项
const vm = new Vue({
el:"#root",
data:{
isHot:true,
},
computed:{
info(){
return this.isHot ? '炎热' : '凉爽'
}
},
methods:{
change(){
this.isHot=!this.isHot
console.log("@",this)
//this.x++
}
},
watch:{
info:{
immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("info修改了",newValue,oldValue)
}
}
}
})2.Vm身上的方法
总结：监视属性watch:
(1)当被监视的属性变化时，回调函数自动调用
(2)监视的属性必须存在，才能进行监视
(3)监视的两种写法：
a.new Vue时传入watch配置
b.通过vm.$watch监视
二.深度监视
1.Vue中watch默认不监测对象内布值的改变（一层）
2.配置deep：true可以监测对象内部值的改变（多层）
备注
1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不开业
2.使用watch时根据数据的具体结构，觉得是否采用深度监视
watch:{
info:{
//immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("info修改了",newValue,oldValue)
}
},
//监视多级结构中某个属性变化
/*'numbers.a':{
deep:true,
//immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("a修改了",newValue,oldValue)
}
},*/
'numbers':{
deep:true,
//immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("a修改了",newValue,oldValue)
}
}
}三.简写
不配置其他配置项时可以简写
/* watch:{
info:{
//不需要immediate,deep可简写
//immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("info修改了",newValue,oldValue)
}
},
//简写
isHot(newValue,oldValue) {
console.log("info修改了",newValue,oldValue)
},
},*/
})
/*vm.$watch('info',{
immediate:true,//初始化时handle执行一次
handler(newValue,oldValue){
console.log("info修改了",newValue,oldValue)
}
})*/
//简写
vm.$watch('info',function(newValue,oldValue){
console.log("info修改了",newValue,oldValue)
})四.computed和watch之间的区别
1.computed能完成的功能，watch都可以完成
2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
watch:{
firstName(val){
setTimeout(()=>{
this.fullName=val+'-'+this.lastName
},1000)
},
lastName(val){
this.fullName=this.firstName+'-'+val
}
}两个重要的小原则
1.所有被VUE管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被VUE所管理的函数（定时器的回调函数、ajax的回调函数等、promise的回调函数），最好写成箭头函数，这样This的指向才是Vm或组件实例对象