vue异步更新
2022-04-15 18:19:05 6 举报AI智能生成
vue异步更新
作者其他创作
大纲/内容
入口
core/observer/index.js
core/observer/index.js
defineReactive方法的setter里的
dep.notify()通知更新
dep.notify()通知更新
core\observer\watcher.js
update() dep.notify()之后watcher执⾏更新，执⾏⼊队操作
core\observer\scheduler.js
queueWatcher(watcher) 执⾏watcher⼊队操作
core\util\next-tick.js
nextTick(flushSchedulerQueue) nextTick按照特定异步策略执⾏队列操作
nexttick利用promise创建微任务（如果浏览器不支持则使用别的方法）
具体实现
异步：只要侦听到数据变化，Vue 将开启⼀个队列，
并缓冲在同⼀事件循环中发⽣的所有数据变更。
并缓冲在同⼀事件循环中发⽣的所有数据变更。
批量：如果同⼀个 watcher 被多次触发，只会被推⼊到队列中⼀次。
去重对于避免不必要的计算 和 DOM 操作是⾮常重要的。
然后，在下⼀个的事件循环“tick”中，Vue 刷新队列执⾏实际⼯作。
去重对于避免不必要的计算 和 DOM 操作是⾮常重要的。
然后，在下⼀个的事件循环“tick”中，Vue 刷新队列执⾏实际⼯作。
异步策略：Vue 在内部对异步队列尝试使⽤原⽣的 Promise.then、
MutationObserver 或setImmediate，
如果执⾏环境都不⽀持，则会采⽤ setTimeout 代替
MutationObserver 或setImmediate，
如果执⾏环境都不⽀持，则会采⽤ setTimeout 代替
0 条评论
下一页
为你推荐
查看更多
