前言

这篇文章主要总结一下异步更新以及vue里怎么体现的。。。

异步更新队列

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

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

vue中的具体实现

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

代码中分析

• update() core\observer\watcher.js
  dep.notify()之后watcher执行更新，执行入队操作
• queueWatcher(watcher) core\observer\scheduler.js 执行watcher入队操作
• nextTick(flflushSchedulerQueue) core\util\next-tick.js
  nextTick按照特定异步策略执行队列操作

总结

以上就是Vue的批量异步更新策略，下篇我准备总结一波虚拟DOM，以及虚拟DOM在Vue里是怎么运行、在哪里生成的、谁负责更新虚拟DOM、path又是什么？有什么作用