前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

背景

Vue3 中的 watchEffect API 很多人可能都使用過，它與 watch 類似，但也有一些區別。簡單來說，watchEffect 會自動收集依賴的響應式數據，一旦這些數據發生變化，就會觸發函數的重新執行。

圖片

謹慎使用！

我發現團隊成員們似乎很喜歡用 watchEffect，他們覺得 watchEffect 比較方便，寫起來也比較爽。

不過，個人來說，我很少使用 watchEffect，主要是因為以下幾點原因：

• 依賴關系不夠明確
• 可能存在性能問題

可維護性較差

首先談一下第一點。假設我需要監聽變量 a、b、c，然后根據它們執行一系列邏輯。如果使用 watch，我們可以很清楚地看到依賴項是 a、b 和 c，這樣后續的開發者也能夠輕松明了地理解這段代碼。

圖片

然而，使用 watchEffect 的時候，下次再看代碼時，你需要去逐個分析邏輯，才能搞清楚有哪些依賴項。這會導致代碼的可維護性變差。

圖片

性能問題？

接下來談談 watchEffect 可能引發的性能問題。讓我們來看一個簡單的例子：

圖片

這里 isEven 的值始終是 true，理論上該函數只需要執行一次即可。但由于 watchEffect 沒有做惰性處理，每次 isEven.value 被賦新值時，函數都會重新執行一次，無論 isEven 是否發生了變化。這就會導致不必要的重復執行，浪費性能。

不過如果使用 watch，就不會有這種性能問題。

圖片