快捷導(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：通過(guò)屬性計(jì)算而得來(lái)的屬性　

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

2、computed是依賴(lài)vm中data的屬性變化而變化的，也就是說(shuō)，當(dāng)data中的屬性發(fā)生改變的時(shí)候，當(dāng)前函數(shù)才會(huì)執(zhí)行，data中的屬性沒(méi)有改變的時(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ù)所依賴(lài)的屬性沒(méi)有發(fā)生改變，那么調(diào)用當(dāng)前函數(shù)的時(shí)候會(huì)從緩存中讀取。（不會(huì)再次計(jì)算）

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

watch：屬性監(jiān)聽(tīng)

1、watch中的函數(shù)名稱(chēng)必須要和data中的屬性名一致，因?yàn)閣atch是依賴(lài)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)聽(tīng)數(shù)據(jù)的值是否發(fā)生改變，而不會(huì)去監(jiān)聽(tīng)數(shù)據(jù)的地址是否發(fā)生改變。也就是說(shuō)，watch想要監(jiān)聽(tīng)引用類(lèi)型數(shù)據(jù)的變化，需要進(jìn)行深度監(jiān)聽(tīng)。

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

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

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

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

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

區(qū)別

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

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

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

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

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