用法
在下次 DOM 更新循环结束之后执行延迟回调。
在修改数据之后立即使用这个方法,获取更新后的 DOM。
原理
Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新
利用微任务会在宏任务队列执行完毕之后立即执行的这个机制,把任务放在微任务中,用promise实现。
同一事件循环中的代码执行完毕 -> DOM 更新 -> nextTick callback触发
降级策略
nextTick的最佳选择就是微任务,但是promise是es6的,就会涉及兼容问题,所以vue求其次选择宏任务作为降级。 setTimeout和setImmediate属于宏任务,setTimeout所有浏览器都兼容,但是执行有延迟,是最后的兜底方案,setImmediate可以兼容ie浏览器。
应用场景
需要在视图更新之后,基于新的视图进行操作。
复习
宏任务 Macrotask队列真实包含任务:
script(主程序代码),setTimeout, setInterval, setImmediate, I/O, UI rendering
微任务 Microtask队列真实包含任务:
process.nextTick, Promises, Object.observe, MutationObserver
由此我们得到的执行顺序应该为:
script(主程序代码)—>process.nextTick—>Promises...——>setTimeout——>setInterval——>setImmediate——> I/O——>UI rendering