vue的nextTick实现原理以及应用场景

402 阅读1分钟

用法

在下次 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