Vue 异步更新
2020-09-15 20:41:05 5 举报
AI智能生成
Vue异步更新脑图
作者其他创作
大纲/内容
数据第一次变更
被代理到_data上的属性<br>/src/core/instance/state.js
set():当前属性的Dep发起通知(notify)<br>/src/core/observer/index.js<br>
notify():执行收集的watcher实例的update方法<br>/src/core/observer/dep.js<br>
update():将当前watcher实例推入queueWatcher队列中<br>/src/core/observer/watcher.js<br>
queueWatcher():对同一watcher实例只会入队一次,并调用nextTick方法准备异步更新<br>/src/core/observer/scheduler.js<br>
nextTick():收集待执行的flushSchedulerQueue<br>timerFunc():对异步更新机制做兼容处理,兼容顺序为Promise->MutationObserver->setImmediate->setTimeout<br>flushCallbacks():执行callbacks中的flushSchedulerQueue<br>/src/core/util/next-tick.js<br>
flushSchedulerQueue():对队列中的watcher实例按照id由小到大排序,然后依次执行每个watcher实例的run方法<br>/src/core/observer/scheduler.js<br>
同一数据在同一个宏任务中后续变更
前面步骤一致,在queueWatcher()方法中不再入队,等待后续flushSchedulerQueue方法执行
不同数据在同一个宏任务中变更
前面步骤一致,在queueWatcher()方法中,由于当前队列已经进入微任务中等待执行,所以只需要将watcher实例入队,等待后续flushSchedulerQueue方法执行
0 条评论
下一页