在Vue.js框架中,computed
和watch
都是響應式系統的一部分,但它們在功能和用途上有所不同。
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
適用於需要執行副作用的場景。