探究 $nextTick 的实现原理

Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。
所以如果你用一个for循环来动态改变数据100次，实际上它只会应用最后一次改变，如果没有这种机制，DOM就进行 100 次的重绘，这固然是一个很大的开销。
而这里就涉及 Vue 一个重要的概念：异步更新队列。
如果想要在修改数据之后立即获取更新后的 DOM 可以使用 nextTick。今天就来看看nextTick 是如何实现的吧！！！
JS 运行机制 (Event Loop)
JS 执行是单线程的，它是基于事件循环的。事件循环大致分为以下几个步骤：
所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。
这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。
Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下tick，并在两个tick之间进行UI渲染。
由于Vue DOM更新是异步执行的，即修改数据时，视图不会立即更新，而是会监听数据变化，并缓存在同一事件循环中，等同一数据循环中的所有数据变化完成之后，再统一进行视图更新。为了确保得到更新后的DOM，所以设置了 Vue.nextTick()方法。