詳解Vue的異步更新原理

1、詳解Vue的異步更新原理上一篇詳解Vue的響應(yīng)式原理中，我們通過9張流程圖，理解了Vue的渲染流程，相信大家對(duì)整個(gè)Vue的渲染流程有一定的了解，這一篇我們來重點(diǎn)關(guān)注一下Vue異步更新原理模塊。本文主要分析Vue從Data更新，到異步更新視圖的流程，也就是下面圖中橙色部分。usdatfCatcheritrencfergBiVUe異步更新原理l.pngdom*我們先來回顧一下圖中的幾個(gè)對(duì)象:jpdatevrzdeCD11MeTsFLnctknsftcnpst!Data對(duì)象：Vue中的Data方法返回的對(duì)象。Dep對(duì)象：每一個(gè)Data屬性都會(huì)創(chuàng)建一個(gè)Dep，用來搜集所有使用到這個(gè)Data的Watch

2、er對(duì)象。Watcher對(duì)象：主要用于渲染。接下來，我們就開始分析這個(gè)流程。Vue異步更新DOM原理很多同學(xué)都知道，Vue中的數(shù)據(jù)更新時(shí)異步的，意味著我們?cè)谛薷耐闐ata之后，并不能立刻獲取修改后的DOM元素。例如：messagechangeDataexportdefaultdata()returnmessage:hello,;,methods:changeData()this.message=helloworld;consttextContent=document.getElementByld(text).textContent;直接獲取，不是最新的consoleog(textContent

3、=helloworld);/false/$nextTick回調(diào)中，是最新的this.$nextTick()=consttextContent=document.getElementById(text).textContent;console.warn(textContent=helloworld);/true);，;什么時(shí)候我們才能獲取真正的DOM元素？答：在Vue的nextTick中這一點(diǎn)在Vue官網(wǎng)有詳細(xì)的介紹，但你是否有想過，為什么Vue需要通過nextTick方法才能獲取最新的DOM?帶著這個(gè)疑問，我們直接看一下源碼。/當(dāng)一個(gè)Data更新時(shí)，會(huì)依次執(zhí)行以下代碼/1.觸發(fā)Data.set

4、/2.調(diào)用dep.notify/3.Dep會(huì)遍歷所有相關(guān)的Watcher執(zhí)行update方法classWatcher/4.執(zhí)行更新操作update()queueWatcher(this);constqueue=;functionqueueWatcher(watcher:Watcher)/5.將當(dāng)前Watcher添加到異步隊(duì)列queue.push(watcher);/6.執(zhí)行異步隊(duì)列，并傳入回調(diào)nextTick(flushSchedulerQueue);/更新視圖的具體方法functionflushSchedulerQueue()letwatcher,id;/排序，先渲染父節(jié)點(diǎn)，再渲染子節(jié)點(diǎn)/這

5、樣可以避免不必要的子節(jié)點(diǎn)渲染，如：父節(jié)點(diǎn)中v-if為false的子節(jié)點(diǎn)，就不用渲染了queue.sort(a,b)=a.id-b.id);/遍歷所有Watcher進(jìn)行批量更新。for(index=0;indexcb.call(ctx););/2執(zhí)行異步任務(wù)/此方法會(huì)根據(jù)瀏覽器兼容性，選用不同的異步策略timerFunc();可以看到，nextTick函數(shù)非常簡(jiǎn)單，它只是將傳入的flushSchedulerQueue添加到callbacks數(shù)組中，然后執(zhí)行timerFunc方法。接下來，我們分析一下timerFunc方法。lettimerFunc;/判斷是否兼容Promiseif(typeofP

6、romise!=undefined)timerFunc=()=Promise.resolve().then(flushCallbacks);/判斷是否兼容MutationObserver/ HYPERLINK /zh-CN/docs/Web/API/MutationObserver/zh-CN/docs/Web/API/MutationObserverelseif(typeofMutationObserver!=undefined)letcounter=1;constobserver=newMutationObserver(flushCallbacks);consttextNode=docum

7、ent.createTextNode(String(counter);observer.observe(textNode,characterData:true,);timerFunc=()=counter=(counter+1)%2;textNode.data=String(counter);/判斷是否兼容setImmediate/該方法存在一些IE瀏覽器中elseif(typeofsetImmediate!=undefined)/這是一個(gè)宏任務(wù)，但相比setTimeout要更好timerFunc=()=setImmediate(flushCallbacks);else/如果以上方法都不知道，

8、使用setTimeout0timerFunc=()=setTimeout(flushCallbacks,0);/異步執(zhí)行完后，執(zhí)行所有的回調(diào)方法，也就是執(zhí)行flushSchedulerQueuefunctionflushCallbacks()for(leti=0;ir*fillVue異步更新原理4.png睞LOhl最后，我們分析一下，為什么this.$nextTick能夠獲取更新后的DOM?hifllihgcabinsJWmixquaue/Vartiter(Watch釧at-rerZup生忙jpdatanrnemlli：:p-2allacks1fLEhSd嗣止r&jSMVusiW.tTkA刪瓠

9、行自罡貞fn/我們使用this.$nextTick其實(shí)就是調(diào)用nextTick方法Vtotype.$nextTick=function(fn:Function)returnnextTick(fn,this);可以看到，調(diào)用this.InextTick的回調(diào)函數(shù)時(shí)，能獲取到更新后的DOM元素了。由于nextTick只是單純通過Promise、SetTimeout等方法模擬的異步任務(wù)，所以也可以手動(dòng)執(zhí)行一個(gè)異步任務(wù)，來實(shí)現(xiàn)和this$nextTick相同的效果。this.message=helloworld;/手動(dòng)執(zhí)行一個(gè)異步任務(wù)，也能獲取最新的DOMPromise.resolve().then()=consttextContent=document.getElementByld(text).textContent;consoleog(textContent=helloworld);/true);setTimeout()=consttextContent=document.getElementByld(text).textContent;consoleog(textContent=helloworld);/true);思考與總結(jié)本文從源碼角度，介紹了Vue異步更新原理，來簡(jiǎn)單回顧一下吧