Vue3實現(xiàn)批量異步更新

更新時間：2023年08月04日 09:44:44 作者：前端胖頭魚

這篇文章主要為大家詳細介紹了Vue3批量異步更新是如何實現(xiàn)的，文中的示例代碼簡潔易懂，具有一定的借鑒價值，感興趣的小伙伴可以跟隨小編一起學習一下

寫在前面

這是Vue3源碼分析的第三篇，與響應式系統(tǒng)中調度執(zhí)行有關，其中computed、watch等核心功能都離不開它，可見其重要程度。

除了實現(xiàn)可調度性，我們還會借助它來實現(xiàn)vue中一個非常重要的功能，批量更新或者叫異步更新

多次修改數(shù)據(jù)(例如自身num10次)，只進行一次頁面渲染（頁面只會渲染最后一次num10）。

什么是調度執(zhí)行

什么是調度執(zhí)行？

指的是響應式數(shù)據(jù)發(fā)生變化出發(fā)副作用函數(shù)重新執(zhí)行時，我們有能力去決定副作用函數(shù)的執(zhí)行時機、次數(shù)和方式。

來看個例子

const?state?=?reactive({
??num:?1
})
effect(()?=>?{
??console.log('num',?state.num)
})
state.num++
console.log('end')

如果我們想要它按照這個順序書序呢？

1
end
2

你可能會說，我調換一下代碼順序就好了哇！??！

const?state?=?reactive({
??num:?1
})
effect(()?=>?{
??console.log('num',?state.num)
})
console.log('end')
state.num++

瞬間就解決了問題。不過看起來這不是我們想要最終答案。

我們想要通過實現(xiàn)可調度性來解決這個問題。

如何實現(xiàn)可調度

我們從結果出發(fā)來思考如何實現(xiàn)可調度的特性。

const?state?=?reactive({
??num:?1
})
effect(()?=>?{
??console.log(state.num)
},?{
??//?注意這里，假如num發(fā)生變化的時候執(zhí)行的是scheduler函數(shù)
??//?那么end將會被先執(zhí)行，因為我們用setTimeout包裹了一層fn
??scheduler?(fn)?{
????//?異步執(zhí)行
????setTimeout(()?=>?{
??????fn()
????},?0)
??}
})
state.num++
console.log('end')

看到這里也許你已經明白了，我們將通過scheduler來自主控制副作用函數(shù)的執(zhí)行時機。

在這之前，執(zhí)行state.num++之后，console.log(state.num)將會被馬上執(zhí)行，而添加scheduler后，num發(fā)生變化后將執(zhí)行scheduler中的邏輯。

源碼實現(xiàn)

雖然可調度性在Vue中非常重要，但實現(xiàn)這個機制卻非常簡單，我們甚至只要增加兩行代碼就可以搞定。

第一行代碼

//?增加options參數(shù)
const?effect?=?function?(fn,?options?=?{})?{
??const?effectFn?=?()?=>?{
???//?....
??}
??//?...
??//?將options參數(shù)掛在effectFn上，便于effectFn執(zhí)行時可以讀取到scheduler
??effectFn.options?=?options
}

第二行代碼

function?trigger(target,?key)?{
//?...
??effectsToRun.forEach((effectFn)?=>?{
????//?當指定了scheduler時，將執(zhí)行scheduler而不是注冊的副作用函數(shù)effectFn
????if?(effectFn.options.scheduler)?{
??????effectFn.options.scheduler(effectFn)
????}?else?{
??????effectFn()
????}
??})
}

是不是簡單到離譜？

批量更新 & 異步更新

來看段詭異的代碼，請問num會被執(zhí)行多少次？100還是101？

const?state?=?reactive({
??num:?1
})
effect(()?=>?{
??console.log('num',?state.num)
})
let?count?=?100
while?(count--)?{
??state.num++
}

對于頁面渲染來說1到101中間的2~100僅僅只是過程，并不是最終的結果，處于性能考慮Vue只會渲染最后一次的101。

Vue是如何做到的呢？

利用可調度性，再加點事件循環(huán)的知識，我們就可以做到這件事。

num的每次變化都會導致scheduler的執(zhí)行，并將注冊好的副作用函數(shù)存入jobQueue隊列，因為Set本身的去重性質，最終只會存在一個fn
利用Promise微任務的特性，當num被更改100次之后同步代碼全部執(zhí)行結束后，then回調將會被執(zhí)行，此時num已經是101，而jobQueue中也只有一個fn，所以最終只會打印一次101

?const?state?=?reactive({
??num:?1
})
const?jobQueue?=?new?Set()
const?p?=?Promise.resolve()
let?isFlushing?=?false
const?flushJob?=?()?=>?{
??if?(isFlushing)?{
????return
??}
??isFlushing?=?true
??//?微任務
??p.then(()?=>?{
????jobQueue.forEach((job)?=>?job())
??}).finally(()?=>?{
????//?結束后充值設置為false
????isFlushing?=?false
??})
}
effect(()?=>?{
??console.log('num',?state.num)
},?{
??scheduler?(fn)?{
????//?每次數(shù)據(jù)發(fā)生變化都往隊列中添加副作用函數(shù)
????jobQueue.add(fn)
????//?并嘗試刷新job，但是一個微任務只會在事件循環(huán)中執(zhí)行一次，所以哪怕num變化了100次，最后也只會執(zhí)行一次副作用函數(shù)
????flushJob()
??}
})
let?count?=?100
while?(count--)?{
??state.num++
}