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

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

　　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ā)生改變，那么調(diào)用當前函數(shù)的時候會從緩存中讀取。

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

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

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

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

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

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

watch：屬性監(jiān)聽

　　1、watch中的函數(shù)名稱必須要和data中的屬性名一致，因為watch是依賴data中的屬性，當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ù)的變化，需要進行深度監(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)聽。

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

2.watch支持異步；

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

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

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

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

　　deep: 深度監(jiān)聽，為了發(fā)現(xiàn)對象內(nèi)部值的變化，復雜類型的數(shù)據(jù)時使用，例如數(shù)組中的對象內(nèi)容的改變，注意監(jiān)聽數(shù)組的變動不需要這么做。注意：deep無法監(jiān)聽到數(shù)組的變動和對象的新增，參考vue數(shù)組變異,只有以響應(yīng)式的方式觸發(fā)才會被監(jiān)聽到。

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

區(qū)別：

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

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

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

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

總結(jié)

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

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