Vue監控器watch的全面解析

前言

前面講到了計算屬性computed，這次講的是監控器watch，主要任務就是監控變量的變化

正文

watch是一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。

1.watch擅長處理的場景：一個數據影響多個數據

2.computed擅長處理的場景：一個數據受多個數據影響

watch的特點：

1.當變量變化時調用函數
2.如果不設置immediate則在初始綁定值時不會執行

watch有兩個選項：

1.deep選項：表示深層遍歷，當需要監控對象內部值的變化時，可以在選項參數中指定 deep: true。注意監聽數組的變動不需要這么做

2.immediate選項：如果在選項參數中指定 immediate: true，將立即觸發監控中變量的函數（如果我們需要在最初綁定值的時候也執行監控函數，就需要用到immediate屬性）

 watch的簡單用法：

watch:{// 監聽stuName的變化情況
    stuName: function(newVal, oldVal){//stuName是data的return返回對象中的數組變量，newVal是屬性變化后的值，oldVal是屬性變化前的值
        console.log(newVal,oldVal);
    }
}

 

watch中的鍵也可以是$route之類的的實例屬性：

watch: {
      '$route': function(newVal, oldVal){
            console.log(newVal,oldVal);
      }
}

 

watch對象的值也可以是方法名：

watch: {
      dataName: 'getPath'
}，
methods: {
      getPath:function(){}
}

 

當watch監控對象時有兩種方法：

方法一：（在只監控對象內某一屬性變化時使用）

watch:{
    'obj.a':{    //加引號監聽對象里的屬性
        handler(newValue,oldValue){
            console.log('obje changed')
        }
    }
}

 

方法二：（當需要監控對象的所有屬性變化時使用）

watch:{
    obj:{
        handler(newValue,oldValue){//此函數名是vue提供的
            console.log('obj changed')
        },
        deep:true
    }
}