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