Computed 和 Watch 的區別?
- 對于Computed:
- 對于Watch:
- immediate:組件加載立即觸發回調函數
- deep:深度監聽,發現數據內部的變化,在復雜數據類型中使用,例如數組中的對象發生變化。需要注意的是,deep無法監聽到數組和對象內部的變化
- 總結:
- 運用場景:
對于Computed:
它支持緩存,只有依賴的數據發生了變化,才會重新計算
不支持異步,當Computed中有異步操作時,無法監聽數據的變化
computed的值會默認走緩存,計算屬性是基于它們的響應式依賴進行緩存的,也就是基于data聲明過,或者父組件傳遞過來的props中的數據進行計算的。
如果一個屬性是由其他屬性計算而來的,這個屬性依賴其他的屬性,一般會使用computed
如果computed屬性的屬性值是函數,那么默認使用get方法,函數的返回值就是屬性的屬性值;在computed中,屬性有一個get方法和一個set方法,當數據發生變化時,會調用set方法。
對于Watch:
它不支持緩存,數據變化時,它就會觸發相應的操作
支持異步監聽
監聽的函數接收兩個參數,第一個參數是最新的值,第二個是變化之前的值
當一個屬性發生變化時,就需要執行相應的操作
監聽數據必須是data中聲明的或者父組件傳遞過來的props中的數據,當發生變化時,會觸發其他操作,函數有兩個的參數:
immediate:組件加載立即觸發回調函數
deep:深度監聽,發現數據內部的變化,在復雜數據類型中使用,例如數組中的對象發生變化。需要注意的是,deep無法監聽到數組和對象內部的變化
當想要執行異步或者昂貴的操作以響應不斷的變化時,就需要使用watch
總結:
computed 計算屬性 : 依賴其它屬性值,并且 computed 的值有緩存,只有它依賴的屬性值發生改變,下一次獲取 computed 的值時才會重新計算 computed 的值
watch 偵聽器 : 更多的是觀察的作用,無緩存性,類似于某些數據的監聽回調,每當監聽的數據變化時都會執行回調進行后續操作
運用場景:
當需要進行數值計算,并且依賴于其它數據時,應該使用 computed,因為可以利用 computed 的緩存特性,避免每次獲取值時都要重新計算
當需要在數據變化時執行異步或開銷較大的操作時,應該使用 watch,使用 watch 選項允許執行異步操作 ( 訪問一個 API ),限制執行該操作的頻率,并在得到最終結果前,設置中間狀態。這些都是計算屬性無法做到的