快捷導(dǎo)航

vue2.0的計(jì)算屬性computed和watch的區(qū)別及各自?使用場(chǎng)景解讀

更新時(shí)間：2023年01月20日 09:04:51 作者：huangzhin

這篇文章主要介紹了vue2.0的計(jì)算屬性computed和watch的區(qū)別及各自?使用場(chǎng)景，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

computed：通過屬性計(jì)算而得來的屬性　

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

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

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

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

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

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

watch：屬性監(jiān)聽

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

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

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

4、watch只會(huì)監(jiān)聽數(shù)據(jù)的值是否發(fā)生改變，而不會(huì)去監(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í)，數(shù)組已經(jīng)更改，但是視圖沒有更新。更改數(shù)組必須要用splice()或者$set。

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

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

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

區(qū)別

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

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

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

4、使用場(chǎng)景：