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

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

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

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

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

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

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

使用場景：當(dāng)一個值受多個屬性影響的時候------------購物車商品結(jié)算

watch：屬性監(jiān)聽

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

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

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

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

• "obj.name"(){}如果obj的屬性太多，這種方法的效率很低，   
• obj:{handler(newVal){},deep:true}用handler+deep的方式進(jìn)行深度監(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)聽。

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

區(qū)別

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

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

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

4、使用場景：

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

總結(jié)

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

最新評論