Skip to content

nextTick核心和作用

核心

利用了JavaScript的事件循环线程去异步操作

将用户传入的函数注册到异步任务队列中执行

作用

由于Vue在更新DOM的时候是异步任务,只要监听到数据变化时,Vue就会开启一个队列将这些数据变更推送到队列中,如果同一个watcher频繁触发,只会推入到队列中一次,避免重复操作DOM和计算,起到性能优化。

上面说了,Vue在更新DOM时是异步的,所以我们不能直接拿到更新之后的数据,而是需要等待DOM在异步任务中更新完毕后才能拿到最新的数据,这时就需要通过nextTick拿到最新的数据。

在Vue中,异步队列会使用原生的Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 setTimeout(fn, 0) 代替