計算屬性computed和watch的區(qū)別及各自使用場景

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

1、computed內部的函數(shù)在調用時不加()。即vm.屬性名，如vm.reversedMessage

2、computed是依賴vm中data的屬性變化而變化的，也就是說，當data中的屬性發(fā)生改變的時候，當前函數(shù)才會執(zhí)行，data中的屬性沒有改變的時候，當前函數(shù)不會執(zhí)行。

3、computed中的函數(shù)必須用return返回。

4、注意：在computed中不要對data中的屬性進行賦值操作。如果對data中的屬性進行賦值操作了，就是data中的屬性發(fā)生改變，從而觸發(fā)computed中的函數(shù)，形成死循環(huán)了。

5、當computed中的函數(shù)所依賴的屬性沒有發(fā)生改變，那么調用當前函數(shù)的時候會從緩存中讀取。（不會再次計算）

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

watch：屬性監(jiān)聽

1、watch中的函數(shù)名稱必須要和data中的屬性名一致，因為watch是依賴data中的屬性，當data中的屬性發(fā)生改變的時候，watch中的函數(shù)就會執(zhí)行。

2、watch中的函數(shù)有兩個參數(shù)，前者是newVal，后者是oldVal。

3、watch中的函數(shù)是不需要調用的。

4、watch只會監(jiān)聽數(shù)據(jù)的值是否發(fā)生改變，而不會去監(jiān)聽數(shù)據(jù)的地址是否發(fā)生改變。也就是說，watch想要監(jiān)聽引用類型數(shù)據(jù)的變化，需要進行深度監(jiān)聽。   

• "obj.name"(){}如果obj的屬性太多，這種方法的效率很低，   
• obj:{handler(newVal){},deep:true}用handler+deep的方式進行深度監(jiān)聽。

5、特殊情況下，watch無法監(jiān)聽到數(shù)組的變化，特殊情況就是說更改數(shù)組中的數(shù)據(jù)時，數(shù)組已經(jīng)更改，但是視圖沒有更新。更改數(shù)組必須要用splice()或者$set。

• this.arr.splice(0,1,100) 修改arr中第0項開始的1個數(shù)據(jù)為100，
• this.$set(this.arr,0,100) 修改arr第0項值為100。

6、immediate:true    頁面首次加載的時候做一次監(jiān)聽。

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

區(qū)別

1、功能上：computed是計算屬性，watch是監(jiān)聽一個值的變化，然后執(zhí)行對應的回調。

2、是否調用緩存：computed中的函數(shù)所依賴的屬性沒有發(fā)生變化，那么調用當前的函數(shù)的時候會從緩存中讀取，而watch在每次監(jiān)聽的值發(fā)生變化的時候都會執(zhí)行回調。

3、是否調用return：computed中的函數(shù)必須要用return返回，watch中的函數(shù)不是必須要用return。

4、使用場景：

• computed當一個屬性受多個屬性影響的時候，使用computed-------購物車商品結算。
• watch當一條數(shù)據(jù)影響多條數(shù)據(jù)的時候，使用watch-------搜索框。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論