Vue的$nextTick函数的意义是在dom更新之后执行其中的回调,这样就可以调用最新的dom元素信息

$nextTick函数的主要实现原理是通过事件循环,因为事件循环中分为宏任务和微任务,而微任务有着较高的执行优先级,而在Vue中,页面dom元素的修改是在微事件循环之中处理的,而nextTick本身有一个pending属性和一个callback数组,当pending为真时,代表将回调函数压入nextTick的callback数组中的过程,而pending为false时,代表的是nextTickHandler函数已经执行,可以开始执行回调函数了,这样就代表着dom元素已经修改完毕,而这样压入微任务队列中的就实现了在dom之后更新的效果

nextTick中值得注意的一点是,在Vue中对Dom进行操作时,实际进行的是异步操作,他会将对dom的所有操作都压入微任务栈中,然后在整个事件循环之后统一对页面进行渲染(UI render),这样就提高了渲染的效率

同时还有注意$nextTick的降级操作,因为promise是es6的新语法,所有会遇到不支持promise的情况,那就会选择一些其他的异步函数,甚至可能使用宏任务,所以nextTick在执行中的具体位置并不是一定的