其实这个问题主要就是针对Vue的异步更新队列的理解，因为我们平时用的也比较少，所以很多时候都会忽略掉，但是如果我们在面试当中能比较详细的解答这个问题，那么我相信这应该会是一个闪光点，那话不多说，我们先来捋一下答题思路：

答题思路： nextTick是什么？先来一个定义 为什么需要他呢？异步更新队列实现原理解释 什么地方使用到他呢？描述使用的场景 如何使用他呢？描述使用的具体方法 说一说源码中是怎么实现他的？扩展更深层次源码实现

我们先来看下官方的定义： Vue.nextTick（[callback, context]） 定义：在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新之后的DOM。 1// 修改数据 2vm.msg = 'Hello' 3// DOM 还没有更新 4Vue.nextTick(function () { 5 // DOM 更新了 6})

看完官方的定义，感觉唯一清楚了这个API应该是在修改数据之后立即使用他，其余的感觉还是不太明白，那接下来我们就从实际的案例来看看： 1 2

4 5 6 7 8 9

11 12

38

我们可以从上面的案例代码看出，在两个不同的时机输出的结果是不一样的，那为什么会出现这样的情况呢？这个时候我们就需要看看Vue的异步更新策略了，看官网定义： 图片

看到这个官网的异步更新策略我们应该比较容易理解，更新DOM是异步的，侦听到数据变化之后不是立即去改变渲染DOM，而是开启一个队列缓冲在同一个事件循环中发生的所有数据变更，一个Watcher触发多次也只推入队列一次。

那我们是否想过为什么需要这个异步更新策略呢？我们来看一个实际的🌰：

我们来看这个地方，如果说Vue没有使用异步更新策略，那我们在调用addCount函数的时候，每循环一次count就要加一，那么每一次都要去执行一遍setter->Dep->Watcher->update->patch这个流程，也就意味着每次加一都要更新一下视图，这明显就不合理，重复的工作极大的消耗了浏览器的性能，所以这就是异步更新策略的必要性了

我们知道了异步更新的必要性，那我们在平时工作中有的时候就有一类需求比如需要在DOM更新之后立马就进行某项操作，那么这个时候nextTick这个API不就用上了吗？现在理解官方定义的前一句话了吧：DOM更新循环结束之后执行延迟回调

前面我们分析了nextTick的定义，必要性以及使用场景等等，接下来我们就升级一下，让我们的答案变得更加有深度，看看源码中nextTick的实现： 源码地址：src/core/util/next-tick.js 在Vue2.x的源码中，这个nextTick部分都是专门单独一个文件的，我们分部分来看 图片

这部分的代码其实并不难理解，在callbacks里面加入我们传入的异步执行的函数，然后使用timerFunc异步方式来调用它们，好了，这里我们发现出现了一个新的名词：timerFunc——异步调用方式，这是什么呢？我们继续看源码文件

图片 看这段源码我们就知道了，timerFunc就是通过检测当前环境的不同来使用不同的实现方式，我们看这个if代码块，发现其实就是按照Promise——>MutationsObserver——>setImmediate——>setTimeout的优先级顺序来实现的，那为什么要按照这个顺序呢？

其实我们应该知道前两者Promise和MutationsObserver的回调函数都会在microtask中执行，它们会比后两者macrotask先执行，所以优先考虑前两者的实现，除非所处环境不支持，最后才会降级成最后的setTimeout

图片

最后一部分源码也贴上，我们去调试可以知道，其实这就是我们在项目中调用的nextTick函数，这里就不过多解释了。

OK，到这里我们今天要分析的Vue中的nextTick有关问题我们就看的差不多了，最后我们来一个比较完整的回答总结： nextTick是Vue提供的一个全局API，由于Vue的异步更新策略导致对数据的修改不会立即体现在DOM变化上，此时如果我们需要立即获取到变化后的DOM的状态，就需要使用这个API（定义+使用场景） Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的DOM操作完成之后再调用（必要性） 在callbacks里面加入我们传入的函数，然后用timerFunc的异步方式调用它们，首选是Promise方式（源码层面剖析）