vue中computed和watch的區別，以及適用場景

computed：經過屬性計算而得來的屬性

　　一、computed內部的函數在調用時不加()。

　　二、computed是依賴vm中data的屬性變化而變化的，也就是說，當data中的屬性發生改變的時候，當前函數纔會執行，data中的屬性沒有改變的時候，當前函數不會執行。

　　三、computed中的函數必須用return返回。

　　四、在computed中不要對data中的屬性進行賦值操做。若是對data中的屬性進行賦值操做了，就是data中的屬性發生改變，從而觸發computed中的函數，造成死循環了。

　　五、當computed中的函數所依賴的屬性沒有發生改變，那麼調用當前函數的時候會從緩存中讀取。

　　

　　使用場景：當一個值受多個屬性影響的時候------------購物車商品結算

 

watch：屬性監聽

　　一、watch中的函數名稱必需要和data中的屬性名一致，由於watch是依賴data中的屬性，當data中的屬性發生改變的時候，watch中的函數就會執行。

　　二、watch中的函數有兩個參數，前者是newVal，後者是oldVal。

　　三、watch中的函數是不須要調用的。

　　四、watch只會監聽數據的值是否發生改變，而不會去監聽數據的地址是否發生改變。也就是說，watch想要監聽引用類型數據的變化，須要進行深度監聽。"obj.name"(){}------若是obj的屬性太多，這種方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式進行深度監聽。

　　五、特殊狀況下，watch沒法監聽到數組的變化，特殊狀況就是說更改數組中的數據時，數組已經更改，可是視圖沒有更新。更改數組必需要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0項開始的1個數據爲100，this.$set(this.arr,0,100)-----修改arr第0項值爲100。

　　六、immediate:true    頁面首次加載的時候作一次監聽。

 

　　使用場景：當一條數據的更改影響到多條數據的時候---------搜索框

　　

 

區別：

　　一、功能上：computed是計算屬性，watch是監聽一個值的變化，而後執行對應的回調。

　　二、是否調用緩存：computed中的函數所依賴的屬性沒有發生變化，那麼調用當前的函數的時候會從緩存中讀取，而watch在每次監聽的值發生變化的時候都會執行回調。

　　三、是否調用return：computed中的函數必需要用return返回，watch中的函數不是必需要用return。

　　四、使用場景：computed----當一個屬性受多個屬性影響的時候，使用computed-------購物車商品結算。watch----當一條數據影響多條數據的時候，使用watch-------搜索框。