Vue源码解析——异步更新队列+虚拟dom

Vue源码解析——异步更新队列+虚拟dom

异步更新队列

Vue高效的秘诀是一套批量、异步的更新策略。

每一个组件对应一个watcher实例，在一个队列中插入watcher，再进行批量操作。

概念

• 事件循环：浏览器的一套工作机制。浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务。
• 宏任务：一系列任务的集合，代表着一个个离散的、独立工作单元。浏览器完成一个宏任务，在下一个宏任务执行开始前，会对页面进行重新渲染。主要包括创建主文档对象、解析HTML、执行主线JS代码以及各种事件如页面加载、输入、网络事件和定时器等。
• 微任务：代表更小的任务，是当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会清空微任务之后再重新渲染。微任务的例子有 promise 回调函数、DOM发生变化等。

vue中的具体实现

• 异步：只要侦听到数据变化，vue将开启一个队列，并缓冲在用一事件循环中发生所有的数据变更。
• 批量：如果同一个watcher被多次触发，只会被推入队列中一次。去重对于避免不必要的计算和DOM操作是非常重要的。然后在下一个事件循环“tick”中，vue刷新队列执行实际操作。
• 异步策略：vue在内部对异常队列尝试使用原声的promise.then、Mutationobserver、serImmediate，如果执行环境不支持，则会采用宏任务setTimeout(fn,0)代替。

代码部分

update() core\observer\watcher.js

dep.notify()之后watcher执行更新，执行入队操作

queueWatcher(watcher) core\ob