大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

背景

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

圖片

謹(jǐn)慎使用！

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

其實(shí)我個(gè)人是很少用 watchEffect 的，因?yàn)槲腋杏X：

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

可維護(hù)性較差

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

圖片

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

圖片

性能問題？

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

圖片

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

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