Vue2笔记:nextTick

93 阅读1分钟

nextTick涉及到Vue的批量异步更新策略,它是启动异步任务队列的开关,即在内部使用,也提供给用户使用。

数据频繁变动使watcher.update重复触发,如果每次触发都执行更新显然效率极差,Vue的策略是记录一次宏任务中所有数据变化对应的Watcher,多次触发只需入队一次,通过异步方法统一更新。

defineProperty set -> dep.notify() -> Watcher.update() -> queueWatcher()

记录watcher的id,同一个watcher只需入队一次,第一个watcher入队时调用nextTick(flushSchedulerQueue)

将来执行flushSchedulerQueue 遍历所有Watcher执行.run()

nextTick原理

nextTick内部维护一个callbacks队列, 调用nextTick将callback push进 callbacks队列,当第一次调用nextTick时将pending设为启动状态,nextTick会使用Promise.resolve().then(flushCallbacks)来启动异步冲刷

flushCallbacks遍历callbacks队列执行每一个callback,组件更新时会将flushSchedulerQueue作为callback传入,所以之前记录的所有Watcher会在Promise.resolve()时统一调用.run更新, 同时将pending状态归位。

如果浏览器不支持Promise会使用其他方法,最终退化到setTimeout

image.png

他们的执行顺序和打印内容都是什么呢

image.png