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

　　1、computed內(nèi)部的函數(shù)在調(diào)用時(shí)不加()。

　　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ì)從緩存中讀取。

1. 支持緩存，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算

2. 不支持異步，當(dāng)computed內(nèi)有異步操作時(shí)無效，無法監(jiān)聽數(shù)據(jù)的變化

3.computed 屬性值會(huì)默認(rèn)走緩存，計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計(jì)算得到的值

4. 如果一個(gè)屬性是由其他屬性計(jì)算而來的，這個(gè)屬性依賴其他屬性，是一個(gè)多對(duì)一或者一對(duì)一，一般用computed

5.如果computed屬性屬性值是函數(shù)，那么默認(rèn)會(huì)走get方法；函數(shù)的返回值就是屬性的屬性值；在computed中的，屬性都有一個(gè)get和一個(gè)set方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用set方法。

　　使用場(chǎng)景：當(dāng)一個(gè)值受多個(gè)屬性影響的時(shí)候------------購(gòu)物車商品結(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? ? 頁(yè)面首次加載的時(shí)候做一次監(jiān)聽。

?1. 不支持緩存，數(shù)據(jù)變，直接會(huì)觸發(fā)相應(yīng)的操作；

2.watch支持異步；

3.監(jiān)聽的函數(shù)接收兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值；第二個(gè)參數(shù)是輸入之前的值；

4. 當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行對(duì)應(yīng)的操作；一對(duì)多；

5. 監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)，當(dāng)數(shù)據(jù)變化時(shí)，觸發(fā)其他操作，函數(shù)有兩個(gè)參數(shù)，

　　immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行，

　　deep: 深度監(jiān)聽，為了發(fā)現(xiàn)對(duì)象內(nèi)部值的變化，復(fù)雜類型的數(shù)據(jù)時(shí)使用，例如數(shù)組中的對(duì)象內(nèi)容的改變，注意監(jiān)聽數(shù)組的變動(dòng)不需要這么做。注意：deep無法監(jiān)聽到數(shù)組的變動(dòng)和對(duì)象的新增，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會(huì)被監(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)景：computed----當(dāng)一個(gè)屬性受多個(gè)屬性影響的時(shí)候，使用computed-------購(gòu)物車商品結(jié)算。watch----當(dāng)一條數(shù)據(jù)影響多條數(shù)據(jù)的時(shí)候，使用watch-------搜索框。

總結(jié)

以上是生活随笔為你收集整理的Vue中computed和watch的区别（面试题）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。