Vue 异步更新

Vue 异步更新

数据第一次变更

被代理到_data上的属性/src/core/instance/state.js

set()：当前属性的Dep发起通知（notify）/src/core/observer/index.js

notify()：执行收集的watcher实例的update方法/src/core/observer/dep.js

update()：将当前watcher实例推入queueWatcher队列中/src/core/observer/watcher.js

queueWatcher()：对同一watcher实例只会入队一次，并调用nextTick方法准备异步更新/src/core/observer/scheduler.js

nextTick()：收集待执行的flushSchedulerQueuetimerFunc()：对异步更新机制做兼容处理，兼容顺序为Promise->MutationObserver->setImmediate->setTimeoutflushCallbacks()：执行callbacks中的flushSchedulerQueue/src/core/util/next-tick.js

flushSchedulerQueue()：对队列中的watcher实例按照id由小到大排序，然后依次执行每个watcher实例的run方法/src/core/observer/scheduler.js

同一数据在同一个宏任务中后续变更

前面步骤一致，在queueWatcher()方法中不再入队，等待后续flushSchedulerQueue方法执行

不同数据在同一个宏任务中变更

前面步骤一致，在queueWatcher()方法中，由于当前队列已经进入微任务中等待执行，所以只需要将watcher实例入队，等待后续flushSchedulerQueue方法执行