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

　　1、computed內部的函數在調用時不加()。

　　2、computed是依賴vm中data的屬性變化而變化的，也就是說，當data中的屬性發生改變的時候，當前函數才會執行，data中的屬性沒有改變的時候，當前函數不會執行。

　　3、computed中的函數必須用return返回。

　　4、在computed中不要對data中的屬性進行賦值操作。如果對data中的屬性進行賦值操作了，就是data中的屬性發生改變，從而觸發computed中的函數，形成死循環了。

　　5、當computed中的函數所依賴的屬性沒有發生改變，那么調用當前函數的時候會從緩存中讀取。

1. 支持緩存，只有依賴數據發生改變，才會重新進行計算

2. 不支持異步，當computed內有異步操作時無效，無法監聽數據的變化

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

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

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

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

watch：屬性監聽

　　1、watch中的函數名稱必須要和data中的屬性名一致，因為watch是依賴data中的屬性，當data中的屬性發生改變的時候，watch中的函數就會執行。

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

　　3、watch中的函數是不需要調用的。

　　4、watch只會監聽數據的值是否發生改變，而不會去監聽數據的地址是否發生改變。也就是說，watch想要監聽引用類型數據的變化，需要進行深度監聽。"obj.name"(){}------如果obj的屬性太多，這種方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式進行深度監聽。

　　5、特殊情況下，watch無法監聽到數組的變化，特殊情況就是說更改數組中的數據時，數組已經更改，但是視圖沒有更新。更改數組必須要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0項開始的1個數據為100，this.$set(this.arr,0,100)-----修改arr第0項值為100。

　　6、immediate:true? ? 頁面首次加載的時候做一次監聽。

?1. 不支持緩存，數據變，直接會觸發相應的操作；

2.watch支持異步；

3.監聽的函數接收兩個參數，第一個參數是最新的值；第二個參數是輸入之前的值；

4. 當一個屬性發生變化時，需要執行對應的操作；一對多；

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

　　immediate：組件加載立即觸發回調函數執行，

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

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

區別：

　　1、功能上：computed是計算屬性，watch是監聽一個值的變化，然后執行對應的回調。

　　2、是否調用緩存：computed中的函數所依賴的屬性沒有發生變化，那么調用當前的函數的時候會從緩存中讀取，而watch在每次監聽的值發生變化的時候都會執行回調。

　　3、是否調用return：computed中的函數必須要用return返回，watch中的函數不是必須要用return。

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。