前言

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

背景

Vue3 中的 watchEffect API 很多人可能都使用過(guò)，它與 watch 類似，但也有一些區(qū)別。簡(jiǎn)單來(lái)說(shuō)，watchEffect 會(huì)自動(dòng)收集依賴的響應(yīng)式數(shù)據(jù)，一旦這些數(shù)據(jù)發(fā)生變化，就會(huì)觸發(fā)函數(shù)的重新執(zhí)行。

圖片

謹(jǐn)慎使用！

我發(fā)現(xiàn)團(tuán)隊(duì)成員們似乎很喜歡用 watchEffect，他們覺得 watchEffect 比較方便，寫起來(lái)也比較爽。

不過(guò)，個(gè)人來(lái)說(shuō)，我很少使用 watchEffect，主要是因?yàn)橐韵聨c(diǎn)原因：

• 依賴關(guān)系不夠明確
• 可能存在性能問題

可維護(hù)性較差

首先談一下第一點(diǎn)。假設(shè)我需要監(jiān)聽變量 a、b、c，然后根據(jù)它們執(zhí)行一系列邏輯。如果使用 watch，我們可以很清楚地看到依賴項(xiàng)是 a、b 和 c，這樣后續(xù)的開發(fā)者也能夠輕松明了地理解這段代碼。

圖片

然而，使用 watchEffect 的時(shí)候，下次再看代碼時(shí)，你需要去逐個(gè)分析邏輯，才能搞清楚有哪些依賴項(xiàng)。這會(huì)導(dǎo)致代碼的可維護(hù)性變差。

圖片

性能問題？

接下來(lái)談?wù)?watchEffect 可能引發(fā)的性能問題。讓我們來(lái)看一個(gè)簡(jiǎn)單的例子：

圖片

這里 isEven 的值始終是 true，理論上該函數(shù)只需要執(zhí)行一次即可。但由于 watchEffect 沒有做惰性處理，每次 isEven.value 被賦新值時(shí)，函數(shù)都會(huì)重新執(zhí)行一次，無(wú)論 isEven 是否發(fā)生了變化。這就會(huì)導(dǎo)致不必要的重復(fù)執(zhí)行，浪費(fèi)性能。

不過(guò)如果使用 watch，就不會(huì)有這種性能問題。

圖片