一、 watch是什么?
监测 Vue 实例变化的一个表达式或方法。回调函数得到的参数为新值和旧值,用一个函数取代。
简洁的说:watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。
二、应用
**当watch检测对象/数组的情况
a: {{a}}
a:
export default {
name: 'index',
data(){
return{
a:'2'
}
},
watch: {
a: {
handler(newVal, objVal) {
console.log(11);
},
}
}
}
控制台打印如下
image.png
watch中deep属性
当监测为对象的时候(非数组情况),deep = true 可以监测对象中属性的变化,并且(监测为对象的时候,newVal == oldVal)
obj.a: {{obj.a}}
obj.a:
export default {
name: 'index',
data(){
return{
obj:{
a:'初始值'
}
}
},
watch: {
obj: {
handler(newVal, objVal) {
// if(newVal.obj || objVal.obj != objVal.obj){
// console.log(22); //控制台并没有打印 监测为对象的时候,newVal == oldVal
// }
console.log(33) //打印为33
},
deep:true
}
}
}
image.png
watch中immediate属性
进入组件的时候,第一次并不会执行watch,是因为immediate 默认 false
当 immediate = true 的时候,进入组件会立即执行。并且可以监测到组件传递数据。
最后一点,在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域