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

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

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

寫在前面

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

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

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

什么是調(diào)度執(zhí)行

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

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

來看個(gè)例子

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

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

1
end
2

你可能會說，我調(diào)換一下代碼順序就好了哇?。?！

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

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

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

如何實(shí)現(xiàn)可調(diào)度

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

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

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

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

源碼實(shí)現(xiàn)

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

第一行代碼

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

第二行代碼

function?trigger(target,?key)?{
//?...
??effectsToRun.forEach((effectFn)?=>?{
????//?當(dāng)指定了scheduler時(shí)，將執(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僅僅只是過程，并不是最終的結(jié)果，處于性能考慮Vue只會渲染最后一次的101。

Vue是如何做到的呢？

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

num的每次變化都會導(dǎo)致scheduler的執(zhí)行，并將注冊好的副作用函數(shù)存入jobQueue隊(duì)列，因?yàn)镾et本身的去重性質(zhì)，最終只會存在一個(gè)fn
利用Promise微任務(wù)的特性，當(dāng)num被更改100次之后同步代碼全部執(zhí)行結(jié)束后，then回調(diào)將會被執(zhí)行，此時(shí)num已經(jīng)是101，而jobQueue中也只有一個(gè)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
??//?微任務(wù)
??p.then(()?=>?{
????jobQueue.forEach((job)?=>?job())
??}).finally(()?=>?{
????//?結(jié)束后充值設(shè)置為false
????isFlushing?=?false
??})
}
effect(()?=>?{
??console.log('num',?state.num)
},?{
??scheduler?(fn)?{
????//?每次數(shù)據(jù)發(fā)生變化都往隊(duì)列中添加副作用函數(shù)
????jobQueue.add(fn)
????//?并嘗試刷新job，但是一個(gè)微任務(wù)只會在事件循環(huán)中執(zhí)行一次，所以哪怕num變化了100次，最后也只會執(zhí)行一次副作用函數(shù)
????flushJob()
??}
})
let?count?=?100
while?(count--)?{
??state.num++
}