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