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

背景

Vue3 有一個 API，可能很多人都用過，那就是 watchEffect，他的功能跟 watch 有點類似，但又有些不一樣，用法如下，它會去自動收集依賴的響應式數(shù)據，響應式數(shù)據一變，就會觸發(fā)函數(shù)的重新執(zhí)行

圖片

謹慎使用！

我發(fā)現(xiàn)組員們很喜歡用watchEffect，他們的意思是watchEffect比較方便，寫起來比較爽

其實我個人是很少用 watchEffect 的，因為我感覺：

• watchEffect 的依賴不夠明確
• watchEffect 可能有性能問題

可維護性較差

先來說第一點，我舉個例子，假如我要監(jiān)聽 a、b、c，然后去執(zhí)行很多邏輯，如果我是使用 watch，我一眼就能看到，依賴項是 a、b、c 這三個變量，后面接手代碼的開發(fā)者，也能很明確看到執(zhí)行這些邏輯的依賴項是什么

圖片

但是如果你使用的是 watchEffect，那么你下次看代碼時，你得去這么多邏輯中去自己一個一個找依賴項是什么，是不是感覺代碼可維護性變得比較差了？

圖片

性能問題？

再來說說 watchEffect 可能有性能問題，我們看以下例子

圖片

其實 isEven 自始至終都是 true，所以應該只執(zhí)行一次函數(shù)就行了，但是 watchEffect 沒有做惰性處理，也就是只要 isEven.value 被重新賦值，函數(shù)就會重新執(zhí)行一遍，無論 isEven 是否變了，這就會造成無意義的代碼執(zhí)行~

但是如果是用 watch 就不會有這種情況發(fā)生