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、使用場景：需要執行異步操作，或者開銷較大的操作。