vue异步更新
2020-09-03 13:45:29 0 举报AI智能生成
vue异步更新思维导图
作者其他创作
大纲/内容
vue\src\core\observer\index.js
对数据修改触发observe的
defineReactive 中 set 执行
例如 this.foo = kaikeba
对数据修改触发observe的
defineReactive 中 set 执行
例如 this.foo = kaikeba
vue\src\core\observer\dep.js
set 对应的小管家Dep 通知更新 notify
执行对应 小秘书 watcher 的update方法
set 对应的小管家Dep 通知更新 notify
执行对应 小秘书 watcher 的update方法
vue\src\core\observer\watcher.js
update 执行时把当前的watcher 放入queueWatcher队列
update 执行时把当前的watcher 放入queueWatcher队列
vue\src\core\observer\scheduler.js
queueWatcher会去重,保证只有一个watcher
调用异步更新nextTick() 执行更新
queueWatcher会去重,保证只有一个watcher
调用异步更新nextTick() 执行更新
vue\src\core\util\next-tick.js
nextTick - timerFunc 放入微服务栈
执行微任务，执行回调方法, 回调方法 flushSchedulerQueue
nextTick - timerFunc 放入微服务栈
执行微任务，执行回调方法, 回调方法 flushSchedulerQueue
vue\src\core\observer\index.js
this.b.anhao = "show me the money"
新增属性 - 会递归执行 observe
生成一个新的sub watcher
this.b.anhao = "show me the money"
新增属性 - 会递归执行 observe
生成一个新的sub watcher
vue\src\core\observer\scheduler.js
添加到queueWatcher，此时queueWatch已经在微任务栈
添加到queueWatcher，此时queueWatch已经在微任务栈
等待宏服务执行后清空微任务
vue\src\core\observer\scheduler.js
flushSchedulerQueue 对队列中的watcher.id 进行排序
循环执行watcher
flushSchedulerQueue 对队列中的watcher.id 进行排序
循环执行watcher
0 条评论
下一页
