浅谈Vue.nextTick的作用和原理~

前提

Vue实现响应式，并不是数据发生改变后，DOM立刻随之变化，从以下可以看出

而是等所有的数据发生改变后，才去更新DOM。那问题来了，如果我们就是要通过DOM拿到更新的值，

怎么获取更新后的DOM元素值呢，nextTick闪亮登场！

图示

作用

由此，我们可以推测其作用，在vue的数据发生改变后，DOM也更新后，才执行nextTick里面的代码。

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

底层原理

nextTick 本质就是执行延迟回调的钩子，在下次 DOM 更新循环结束之后执行延迟回调。

为何要延迟回调，这跟前提里提到了Vue实现响应式原理有关，Vue是异步执行DOM更新的，这就导致了DOM不会立马更新，而nextTick则就是等到DOM更新后，再去执行回调，这就是说其为执行延迟回调的钩子。

即同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发