vue批量异步更新策略

323 阅读1分钟

vue高效的秘诀是:多个组件改变时,批量、异步更新策略,利用浏览器的事件循环机制

如,懒人洗袜子:一周的袜子集中清洗,省水、省时间

袜子:watcher

盆子:放watcher的队列------queueWatcher

核心代码:

1、遍历watcher,执行更新:/src/core/observer/dep.js

image.png

2、/src/core/observer/watcher.js: update执行入队操作,run执行更新 image.png image.png

3、/src/core/observer/scheduler.js:

image.png

4、执行回调:/src/core/util/next-tick.js

image.png

html代码:

image.png

watcher.update方法执行三次,run方法执行一次

断点视频:www.youtube.com/watch?v=tC8…