vue中监控某个属性的变化

1.深度监控，监测所有属性的变化

watch:{
    obj:{
        handler(newVal,oldVal){

        },
        deep:true
    }

}

2.监测某个属性的变化：

watch:{
    'obj.a':{
        handler(newVal,oldVal){

        }
    },
    '$route.path'(newVal,oldVal){
        //监听路由的变化
    }

}

3.计算属性

computed:{
    a1(){
        return this.obj.a;
    }
}

4.watch与computed的区别？

作用：两者都可以用来监听属性的变化。

computed：根据其他依赖的属性，来形成新的属性；

watch:用来监听data或props属性中数据的变化，从而触发相关操作；

 

区别：

computed：

1、是基于data中声明过或父组件传递的props中的数据计算得到的；

2、computed结果会被缓存，只有当依赖的数据发生变化才会重新计算；

3、不支持异步，当computed内有异步操作时无效，无法监听数据的变化；

4、computed中的属性有get和set方法，但是默认走get方法。

watch：

1、watch监听的数据必须是data中声明过或父组件传递的props中的数据；

2、watch不会被缓存，当监听的数据变化时，直接出发响应的操作。

3、支持异步

4、watch方法中有两个属性：immediate（组件加载立即触发方法），deep（深度监听）

5、使用场景：需要执行异步操作，或者开销较大的操作。