Hello，大家好，我是 Sunday。

自從 Vue3 發(fā)布以后，很多同學第一時間就開始用上了 Composition API。

可是， 5 年過去了，有些新的 API 很多同學卻依然不會使用，比如 watchEffect。

咱們，下來看一個場景，比如：咱們現(xiàn)在要監(jiān)聽 a、b、c 三個變量的變化，然后打印出他們相加的和

watch(
 () => [a.value, b.value, c.value],
 () => {
  console.log('watch', a.value + b.value + c.value)
 }
)

這段代碼也不是不行，但每次加個變量（比如增加了變量 d），咱們就得手動改一遍依賴，太過于麻煩了。

那么，怎么做最好呢？此時就可以使用 watchEffect！

先來回顧下 watch

我們先來復習一下 watch 的本質(zhì)：你告訴 Vue，“這個變量變了，我要做點事”，Vue 就在變量變化時調(diào)用你的回調(diào)。

所以你必須明確告訴 Vue：“我關(guān)注這些變量”。

但問題來了：如果變量很多，那么就得寫一個非常長的數(shù)組，同時萬一寫漏了哪個依賴，整個邏輯就不能用了。

于是 Vue3 提供了一個自動依賴收集的版本：watchEffect

什么是 watchEffect？

watchEffect 的思路是這樣的：

“你不用告訴我你依賴了誰，反正你用了啥，我都記下來，以后它變了我就重新跑你的邏輯?！?/span>

來看一個簡單的示例，同樣的判斷 a、b、c 相加，就可以直接這么寫：

watchEffect(() => {
 console.log(a.value + b.value + c.value)
})

這個函數(shù)在首次運行時，Vue 會記錄下 a、b、c 的依賴，以后只要他們中有一個變了，函數(shù)就會重新執(zhí)行。

你不用再手動指定依賴，也不用擔心漏掉誰，簡直是寫 副作用 邏輯的神器?。?/span>

watchEffect 最適合哪些場景？

說白了，它最適合那些 副作用邏輯本身依賴了誰，是動態(tài)的、不好提前寫死 的場景，比如：

依賴較多或動態(tài)變化

watchEffect(() => {
  if (condition.value) {
    doSomethingWith(a.value)
  } else {
    doSomethingWith(b.value)
  }
})

你發(fā)現(xiàn)沒？這里到底是依賴 a 還是 b，取決于運行時的邏輯，用 watch 寫的話就有點別扭。

計算邏輯與副作用緊耦合

watchEffect(() => {
  const total = items.value.reduce((sum, item) => sum + item.price, 0)
  updateTotalUI(total)
})

只要 items 或它內(nèi)部任意一項的 price 變了，這段邏輯都會重新執(zhí)行。

用 watch 寫這個？你得自己監(jiān)聽 items，還得考慮深度監(jiān)聽……多麻煩啊

調(diào)試打印

watchEffect(() => {
  console.log('User changed:', user.value)
})

不用手動寫 watch(() => user.value)，直接拿來打印就行，特別適合臨時調(diào)試。

那 watch 就沒用了？

當然不是！watch 還是有它的場景，比如：

• 明確知道你只想監(jiān)聽某個變量 的時候
• 需要防抖 / 節(jié)流處理（比如輸入框）的時候
• 想拿到“新值 vs 舊值”做比較 的時候

舉個例子：

watch(searchKeyword, (newVal, oldVal) => {
  if (newVal !== oldVal) {
    fetchSearchResult(newVal)
  }
}, { immediate: true })

這類場景 watch 會比 watchEffect 更加實用。

因此，如果你發(fā)現(xiàn)在 某些場景下 使用 Watch 有點麻煩的話，那么不妨想想 watchEffect 能不能解決你的問題