Vue computed 與 watch

XiSoil發表於2024-09-30

在Vue.js框架中,computedwatch都是響應式系統的一部分,但它們在功能和用途上有所不同。

computed(計算屬性):

  • Computed是基於它們的依賴進行快取的,只有當依賴項發生改變時才會重新計算。
  • 它們通常用於當你需要根據現有資料派生出一些狀態時。
  • Computed可以有getter和setter,但預設只有getter。
  • Comcputed屬性的更新是同步的,它們在依賴項更改時立即重新計算。
  • Computed屬性不能直接影響其內部的響應式狀態,它們是隻讀的,除非你提供了一個setter。
  • Computed屬性不會觸發回撥函式,它們只是返回計算後的值。

watch(偵聽器):

  • Watch允許你在資料變化時執行非同步操作或複雜的邏輯。
  • Watch可以監聽一個或多個資料的變化,並在資料變化時執行相應的操作。
  • Watch支援深度監聽(deep: true),可以監聽物件或陣列內部屬性的變化。
  • Watch可以立即執行(immediate: true),在元件建立時立即執行一次回撥。
  • Watch可以是一次性的(once: true),在資料變化時只觸發一次。
  • Watch可以監聽資料的初始值,也可以監聽資料的變化。

相似之處:

  • 兩者都可以依賴於響應式資料。
  • 都可以用於監測資料的變化,並作出相應的處理。

使用場景:

  • 當你需要根據其他資料計算一個新的值,並且這個值會頻繁地被讀取時,使用computed
  • 當你需要在資料變化時執行非同步操作,或者需要執行一些副作用時,使用watch

效能考慮:

  • computed屬性由於其快取機制,更適合用於效能敏感的場景,如頻繁計算的值。
  • watch由於每次資料變化都會執行回撥,可能對效能有一定影響,適用於不需要頻繁觸發的場景。

總結來說,computed適用於派生狀態的宣告式定義,而watch適用於需要執行副作用的場景。

相關文章