vue中computed和watch的區別,以及適用場景


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

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

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

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

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

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

  

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

 

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、功能上:computed是計算屬性,watch是監聽一個值的變化,然后執行對應的回調。

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

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

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

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM