Vue.js 101 - watch vs. watchEffect

前端工程
,
#1

watch

  • 明確地監聽某一個響應數據

  • 需要明確指定要監視的數據（或數據源）以及當該數據變化時要執行的回調函數。

  • 可以訪問被監聽數據的新舊值

  • 不能被取消

  • 用於需要更多控制和自定義邏輯的場景

watch(
  num,
  (newNum, oldNum) => {
    console.log('num 發生變化了，新值：', newNum, '，舊值：', oldNum);
  },
);

watchEffect

  • Always fire immediately, same thing as passing the immediate option to watch.

    watch(source, (newValue, oldValue) => {
  // executed immediately, then again when `source` changes
}, { immediate: true })

  • 不需要明確指定要監視的數據，它會自動檢測並建立依賴關係。

  • 不能監聽數據的新舊值

  • 是一個函數，接受一個函數作為參數

  • 可以取消

  • 適合簡單且自動化的情況，能夠減少代碼量並提高代碼的可讀性。

watchEffect(() => {
  // 自動監視和執行這個函數內部依賴的數據變化
  const result = count * 2; // 這裡會自動追蹤 count 的變化
  
  // 做一些操作，例如更新 UI，不需要明確指定要監視的數據
})

該用哪個好

  • 問你自己 2 個問題

    1. Do I need access to the old value?

    2. Will it be a problem if the callback fires immediately?

  • 如果都是 YES → choose watch

1個讚
#2

自己認為可以的話，盡量不要用 watch
不然 state 的變化，容易亂掉 :frowning:
還有效能的問題

不過實務面上其實不太可能完全不使用 watch

1個讚