相信大家都有做過(guò)這類的后臺(tái)管理系統(tǒng)。

圖片

我們團(tuán)隊(duì)也有類似于這樣的后臺(tái)管理系統(tǒng)平臺(tái)，且當(dāng)用戶切換到某一個(gè)頁(yè)面時(shí)，這個(gè)頁(yè)面都得去請(qǐng)求最新的數(shù)據(jù)，呈現(xiàn)出來(lái)~

這就會(huì)造成一個(gè)問(wèn)題：當(dāng)用戶頻繁切換 Tab 切換的時(shí)候，就會(huì)不斷地去發(fā)起請(qǐng)求，進(jìn)行渲染呈現(xiàn)，但是其實(shí)正在有意義的只有用戶最后一次切換到的頁(yè)面，我服了，真有人會(huì)這么頻繁切換嗎？不會(huì)是用戶自己切著玩吧？

圖片

那應(yīng)該怎么去優(yōu)化呢？很多人第一時(shí)間想到了防抖，但是我想說(shuō)的是：一般的防抖還真防不??！

一般的防抖

如果是比較普通的場(chǎng)景還是可以用用一般防抖的，就比如某一個(gè)頁(yè)面內(nèi)的 Tab 切換，因?yàn)檫@一類的 Tab 切換說(shuō)到底就是在同一個(gè)頁(yè)面組件下去寫代碼邏輯，所以也比較好控制這些 Tab 切換后的防抖處理

圖片

我們用一個(gè)小案例來(lái)演練一下，我準(zhǔn)備四個(gè)文件，Index.vue、Tab1.vue、Tab2.vue、Tab3.vue

Tab1.vue

圖片

Tab2.vue

圖片

Tab3.vue

圖片

Index.vue

圖片

我們只需要在 Index.vue 中監(jiān)聽 Tab 的切換，然后獲取對(duì)應(yīng)的組件實(shí)例，去執(zhí)行它們的 init 方法，就可以做到每次切換 Tab 都能去請(qǐng)求獲取最新的數(shù)據(jù)

有人會(huì)問(wèn)為啥不能直接將每個(gè)組件中的 init 寫在各自的 onMounted 中？我來(lái)回答一下吧，因?yàn)?nbsp;Tab 默認(rèn)會(huì)做頁(yè)面緩存，也就是只有第一次切換過(guò)去才會(huì)執(zhí)行 onMounted，往后都不會(huì)執(zhí)行了，這樣有助于提升性能，所以不能將 init 寫在 onMounted 中~

現(xiàn)在我們切換 Tab，會(huì)發(fā)現(xiàn)每切換一次就去運(yùn)行請(qǐng)求一次，這顯然違背了我們的期望

圖片

所以我們可以直接給 onTabChange加上防抖，即可解決此問(wèn)題。

圖片

現(xiàn)在我同樣是頻繁切換，但是最終發(fā)起請(qǐng)求的只有一次，也就是用戶最終跳轉(zhuǎn)到的 Tab。

圖片

這就是一般的防抖的應(yīng)用場(chǎng)景。

進(jìn)階版防抖

上面所說(shuō)的一般的防抖只能適用于代碼邏輯相對(duì)于比較集中的場(chǎng)景。

但是如果是那種代碼邏輯比較分散的場(chǎng)景呢？比如后臺(tái)管理系統(tǒng)中，通過(guò)切換不同的 Tab 去切換不同的 路由頁(yè)面，且這些頁(yè)面都是經(jīng)過(guò) keep-alive 處理過(guò)的，且每個(gè)頁(yè)面的請(qǐng)求邏輯都放在 onMounted 中。

圖片

這些頁(yè)面都是一個(gè)個(gè)的文件夾管理的，代碼邏輯相對(duì)比較分散。

為了簡(jiǎn)化場(chǎng)景，降低大家的閱讀成本，我還是用剛剛的代碼來(lái)模擬，還是 Index.vue、Tab1.vue、Tab2.vue、Tab3.vue。

Tab1.vue

圖片

Tab2.vue

圖片

Tab3.vue

圖片

Index.vue

圖片

我們切換 Tab 時(shí)，可以發(fā)現(xiàn)每個(gè) Tab 的請(qǐng)求只會(huì)發(fā)起一次，因?yàn)?nbsp;onMounted 只會(huì)執(zhí)行一次

圖片

但是我們想要的是每次切換 Tab 之后，每個(gè)頁(yè)面都要去重新發(fā)起請(qǐng)求，那應(yīng)該怎么做呢？

其實(shí)很簡(jiǎn)單，我們只需要 “改造” 一下 onMounted 即可

我們新建一個(gè)useCustomMounted.ts ，使用 watch + nextTick 來(lái)取代 onMounted

圖片

接著在Tab1.vue、Tab2.vue、Tab3.vue 中去使用這個(gè) onCustomMounted，這里我只貼出 Tab1.vue 的，其他兩個(gè) Tab 同理，我就不貼出來(lái)了

圖片

接著在 Index.vue 中需要去監(jiān)聽 Tab 變化，并觸發(fā) changeActiveKey

圖片

現(xiàn)在切換 Tab 時(shí)，每次都會(huì)觸發(fā)請(qǐng)求的起了。

圖片

接下來(lái)就要加上防抖了，只需要加在 changeActiveKey 上即可。

圖片

現(xiàn)在我同樣是頻繁切換，但是最終發(fā)起請(qǐng)求的只有一次，也就是用戶最終跳轉(zhuǎn)到的 Tab

圖片