美元nextTick在Vue中的作用是什么

官方文档对nextTick的解释是:

在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。

那么,Vue是如何做的这一点的,是不是在调用修改DOM的Api之后(列表末尾,textContent=皒xxxx"诸如此类),调用了我们的回调函数?
实际上发生了什么呢。

源码

nextTick的实现逻辑在这个文件里:

vue/src/核心/util/next-tick.js

我们调用的。美元nextTick实际上是这个方法:

export  function  nextTick  (cb ?:函数,ctx ?:,对象),{ 　　let  _resolve 　　,callbacks.push((),=祝辞,{ 　　if 才能;(cb), { 　　,,try  { 　　,,,cb.call (ctx) 　　,,},catch  (e), { 　　,,,handleError (e, ctx, & # 39; nextTick& # 39;) 　　,,} 　　,,},else  if  (_resolve), { 　　,,_resolve (ctx) 　　,,} 　　,}) 　　,if (待定),{ 　　pending 才能=,真的 　　timerFunc才能() 　　,} 　　,//flow-disable-line美元 　　,if  (! cb ,,, typeof  Promise  !==, & # 39;未定义# 39;),{ 　　return 才能;new 承诺(resolve =祝辞,{ 　　,,_resolve =解决 　　})才能 　　,} 　　}

可以看到

<李>

回调函数被存放到了一个数组里:回调。

<李>

如果没有传递回调函数,这个方法会返回一个承诺,然后吧解决当成回调函数放到flushCallbacks中。所以文档解释了把本该当成回调函数的回调放到那么里的用法。

<李>

然后,有一个变量叫等待,如果不在等待中,则执行函数timerFunc。而且等待默认等于错误的。

<李>

flushCallbacks这个函数会一口气执行所有回调函数。

timerFunc

timerFunc定义在这里

可以看到timerFunc是在一个已解决了的承诺的那么中执行了flushCallbacks。

利用了js事件循环的微任务的机制

所以,每当我们调用nextTick美元,如果等待为false,就会调用timerFunc,然后timerFunc会把flushCallbacks给塞到事件循环的队尾,等待被调用。

if  (typeof  Promise  !==, & # 39;未定义的,,,,,isNative(承诺),{ 　　,const  p =, Promise.resolve () 　　,timerFunc =,(),=祝辞,{ 　　p.then才能(flushCallbacks) 　　,} 　　}

flushCallbacks

然后在这个文件里还有一个函数叫:flushCallbacks
用来把保存的回调函数给全执行并清空。

function  flushCallbacks  (), { 　　,pending =false 　　,const  copies =, callbacks.slice (0) 　　callbacks.length =, 0 　　,for  (let 小姐:=,0;,小姐:& lt;, copies.length;,我+ +),{ 　　副本才能[我]() 　　,} 　　}

等待

什么时候等待为真正的呢?

从timerFunc被调用到flushCallbacks被调用期间等待为真正的

即一个事件循环周期

在等待期间加入的回调函数,会被已经等待执行的flushCallbacks函数给执行。

核心机制

看完源码,发现除了利用了一个微任务的机制,和Dom更新一点关系都没有哇。

其实调用nextTick的不仅是开发者,Vue更新Dom时,也用到了nextTick。

开发者更新绑定的数据之后,Vue就会立刻调用nextTick,把更新Dom的回调函数作为微任务塞到事件循环里去。

于是,在微任务队列中,开发者调用的nextTick的回调函数,就一定在更行Dom的回调函数之后执行了。

但是问题又来了,根据浏览器的渲染机制,渲染线程是在微任务执行完成之后运行的。渲染线程没运行,怎么拿到Dom呢?

因为,渲染线程只是把Dom树渲染成UI而已,Vue更新Dom之后,在Dom树里,新的Dom节点已经存在了,js线程就已经可以拿到新的Dom了。除非开发者读取Dom的计算属性,触发了强制重流渲染线程才会打断js线程。

总结

<李>

首先timerFunc函数负责把回调函数们都丢到事件循环的队尾

<李>

然后,nextTick函数负责把回调函数们都保存起来。

美元nextTick在Vue中的作用是什么