watch的使用

watch 主要应用于某些数据变化时，会执行某些操作，下面我们来看看watch的用法

1、普通用法
       data:{
            firstName:'Ye'
        },
       watch:{
            firstName:function(oldVal,newVal){
               console.log("lastName")
         },
       }
     简单监视，只要firstName有变化，就会执行函数里面的方法

2、用法二
watch:{
        lastName:{
        handler:function(){
            console.log("invole lastName")
        },
        immediate:true//第一次进来就开始监视，而不是等到下次数据改变了才执行
      },    
}
    
    immediate:true表示第一次进入的时候，就会监视lastName的值，如果为false，第一次进入是不会监视的，只有等到监视的数据变化了才会执行

3、用法三，监视对象
watch:{
obj:{
      handler(oldVal,newVal){
        console.log("objfixed")
      },
      immedaite:true,
      deep:true,//对象的任何属性修改了都会监视到，
    }
}
deep:false 监视obj对象，如果只是修改了对象的某些属性，监视不到obj的变化，只有obj整个有变化之后,
才会执行方法。
deep:true，只要修改obj里面的任意属性，都会执行handler里面的方法。这样的话，开销就会比较大。解决方法看用法四。

4、用法四 监视对象的某个属性
data:{
    obj:{
      a:'123',
      b:'456'
  }
}
watch:{
    'obj.a':{
            handler(oldVal,newVal){
                console.log("objfixed a")
            },
            immedaite:true,
        }
}
vue会一层一层地解析这个对象的所有属性，当检查到最后一个属性时，他才会去监听他真正想监听的那个属性。

注意：无论是watch还是computed，最可能的不要去修改你依赖的那个属性,否则很容易出现一个无限循环的问题
        'obj.a':{
            handler(oldVal,newVal){
                console.log("objfixed a")
                this.obj.a += 1;
            },
            immedaite:true,
            
        }

image.png