Vue中的 computed 和 watch

computed

computed看上去是方法,但是實際上是計算屬性,它會根據你所依賴的數據動態顯示新的計算結果。計算結果會被緩存,computed的值在getter執行後是會緩存的,只有在它依賴的屬性值改變之後,下一次獲取computed的值時纔會重新調用對應的getter來計算

watcher

watcher 更像是一個 data 的數據監聽回調,當依賴的 data 的數據變化,執行回調,在方法中會傳入 newVal 和 oldVal。可以提供輸入值無效,提供中間值 特場景。Vue 實例將會在實例化時調用 $watch(),遍歷 watch 對象的每一個屬性。如果你需要在某個數據變化時做一些事情,使用watch。

共同點:
watch和computed都是以Vue的依賴追蹤機制爲基礎的,它們都試圖處理這樣一件事情:當某一個數據(稱它爲依賴數據)發生變化的時候,所有依賴這個數據的“相關”數據“自動”發生變化,也就是自動調用相關的函數去實現數據的變動。

使用區別:
1. 一般來說,當一個數據對應多條數據的計算結果,依賴多條數據 ,那麼把這個數據設計爲computed的

2.如果要觀察一個數據變化引起其他的變化,通常使用watch來觀察這個數據變化

     //watch擅長處理的場景:一個數據影響多個數據

    //computed擅長處理的場景:一個數據受多個數據影響

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