vue资料整理: nextTick的原理

1.为什么使用nextTick? Vue 是异步修改 DOM 的 并且不鼓励开发者直接接触 DOM，但有时候业务需求中必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback) 这个 api 了。

2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有process.nextTick(Node.js), Promise.then(), MutationObserver;

3. 理解 nextTick 的原理正是 Vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。

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

应用场景：需要在视图更新之后，基于新的视图进行操作。

流程:第一步,把回调函数放入callbacks等待执行;第二步,将执行函数放到微任务或者宏任务中;最后,事件循环到了微任务或者宏任务，执行函数依次执行callbacks中的回调

原理:nextTick就是对setTimeout进行了多种兼容性的处理，也可以理解为将回调函数放入setTimeout中执行；不过nextTick优先放入微任务执行，而setTimeout是宏任务，因此nextTick一般情况下总是先于setTimeout执行