Vue中methods computed 和 watch 的區別

methods :如果你不希望有緩存,請用方法代替

computed: 依賴追蹤機制爲基礎 根據a的值變化 計算出新的值 默認是以get 方法 必須要有return 而且不支持異步 ,基於它們的依賴進行緩存,只有它的相關依賴改變時纔會重新求值,爲什麼需要緩存?假設我們有一個性能開銷比較大的計算屬性A,它需要遍歷一個巨大的數組並做大量的計算,然後我們可能有其他的屬性依賴與A,如果沒有緩存,我們將不可避免地多次執行A的getter,多個數據影響一個數據(狐朋狗友帶壞你)。某【一些】變量發生變化時,影響的【單個】結果對應地發生改變。

watched: 依賴追蹤機制爲基礎 觀察a的值變化 當a的值變化時,幹一件事 ,也叫觀察者、偵聽器,屬性名要和被觀察的值的名字一致 a(newVal,oldVal){ },只有值變化的時候纔會觸發變化,支持數據變化時執行異步,有關計算的事watch做起來比較麻煩,用computed做計算比較簡單,監聽的對象個數:watch只對一個對象進行監聽,computed對多個對象進行監聽(如果有兩個對象其中任意一個做變化,且不管其中哪個對象變化都是做相同的動作的時候應該怎麼辦呢,把這兩個對象寫在一個對象裏面,再watch這個對象,多個watch之間應該儘量避免數據耦合),在某些情況下,確實需要跟蹤觀察值的變化,確實要知道變化前的值和變化後的值,那麼就需要使用watch。比如我現在子組件中,需要實現這樣一個功能,如果props中的某個對象發生了變化,那麼就觸發對應的methods。那麼這個時候你需要用什麼方法來觸發對應的methods呢,這裏很顯然需要使用watch。當你想要在數據變化響應時,執行異步操作或開銷較大的操作,選擇使用watch,一個數據影響多個數據(一粒老鼠屎糟蹋一鍋粥)。適合監控場景,某【一個】變量改變時需要做什麼操作;類似於onchange,適合耗時操作,如網絡請求等。所以每個方法的存在,都是根據業務場景來的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章