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