详解Vue的异步更新原理

1、详解Vue的异步更新原理上一篇详解Vue的响应式原理中，我们通过9张流程图，理解了Vue的渲染流程，相信大家对整个Vue的渲染流程有一定的了解，这一篇我们来重点关注一下Vue异步更新原理模块。本文主要分析Vue从Data更新，到异步更新视图的流程，也就是下面图中橙色部分。usdatfCatcheritrencfergBiVUe异步更新原理l.pngdom*我们先来回顾一下图中的几个对象:jpdatevrzdeCD11MeTsFLnctknsftcnpst!Data对象：Vue中的Data方法返回的对象。Dep对象：每一个Data属性都会创建一个Dep，用来搜集所有使用到这个Data的Watch

2、er对象。Watcher对象：主要用于渲染。接下来，我们就开始分析这个流程。Vue异步更新DOM原理很多同学都知道，Vue中的数据更新时异步的，意味着我们在修改完Data之后，并不能立刻获取修改后的DOM元素。例如：messagechangeDataexportdefaultdata()returnmessage:hello,;,methods:changeData()this.message=helloworld;consttextContent=document.getElementByld(text).textContent;直接获取，不是最新的consoleog(textContent

3、=helloworld);/false/$nextTick回调中，是最新的this.$nextTick()=consttextContent=document.getElementById(text).textContent;console.warn(textContent=helloworld);/true);，;什么时候我们才能获取真正的DOM元素？答：在Vue的nextTick中这一点在Vue官网有详细的介绍，但你是否有想过，为什么Vue需要通过nextTick方法才能获取最新的DOM?带着这个疑问，我们直接看一下源码。/当一个Data更新时，会依次执行以下代码/1.触发Data.set

4、/2.调用dep.notify/3.Dep会遍历所有相关的Watcher执行update方法classWatcher/4.执行更新操作update()queueWatcher(this);constqueue=;functionqueueWatcher(watcher:Watcher)/5.将当前Watcher添加到异步队列queue.push(watcher);/6.执行异步队列，并传入回调nextTick(flushSchedulerQueue);/更新视图的具体方法functionflushSchedulerQueue()letwatcher,id;/排序，先渲染父节点，再渲染子节点/这

5、样可以避免不必要的子节点渲染，如：父节点中v-if为false的子节点，就不用渲染了queue.sort(a,b)=a.id-b.id);/遍历所有Watcher进行批量更新。for(index=0;indexcb.call(ctx););/2执行异步任务/此方法会根据浏览器兼容性，选用不同的异步策略timerFunc();可以看到，nextTick函数非常简单，它只是将传入的flushSchedulerQueue添加到callbacks数组中，然后执行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)/这是一个宏任务，但相比setTimeout要更好timerFunc=()=setImmediate(flushCallbacks);else/如果以上方法都不知道，

8、使用setTimeout0timerFunc=()=setTimeout(flushCallbacks,0);/异步执行完后，执行所有的回调方法，也就是执行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其实就是调用nextTick方法Vtotype.$nextTick=function(fn:Function)returnnextTick(fn,this);可以看到，调用this.InextTick的回调函数时，能获取到更新后的DOM元素了。由于nextTick只是单纯通过Promise、SetTimeout等方法模拟的异步任务，所以也可以手动执行一个异步任务，来实现和this$nextTick相同的效果。this.message=helloworld;/手动执行一个异步任务，也能获取最新的DOMPromise.resolve().then()=consttextContent=document.getElementByld(text).textContent;consoleog(textContent=helloworld);/true);setTimeout()=consttextContent=document.getElementByld(text).textContent;consoleog(textContent=helloworld);/true);思考与总结本文从源码角度，介绍了Vue异步更新原理，来简单回顾一下吧