Vue 源码-事件循环

• 概念解释

  
  WX20210222-221235@2x.png
• 什么叫做事件循环
  浏览器为了协调事件处理,脚本执行,网络请求和渲染等工作而制定的工作机制.在事件循环中有两个非常重要的概念,即宏任务和微任务
• 宏任务: 代表一个个离散,独立的工作单元.浏览器完成一个宏任务,在执行下一个宏任务之前会对页面重新渲染.包括文档创建,解析 html,执行主线程 js 代码.宏任务包括:定时器,主程序执行
• 微任务:微任务是更小的任务,是在当前宏任务执行结束后立即执行的任务.如果宏任务后面跟着微任务,浏览器会在微任务清空之后重新渲染.微任务包括:promise,nextTick MutationObserver,async

Vue中具体实现

nextTick(flushSchedulerQueue)

image.png

在Vue 源码中查看事件循环是如何实现的

1. 从上一篇文章可知,界面的更新是通过src/core/observer/watcher.js中的 update 方法来更新界面的

   
   src/core/observer/watcher.js

2. 在下图描绘的就是queueWatcher函数内部实现情况.标注1判断当前是否在冲刷界面,如果没有的化,那么队列中添加watcher 对象,标注 2 表示把flushSchedulerQueue函数传递到nextTick函数中,这个地方需要认真看清楚

   
   image.png

3. 下图描述的是nextTick函数内部实现情况,调用nextTick函数的时候,需要把上面的传递过来的flushSchedulerQueue函数保存到callbacks数组中.标注2的目的主要是添加微任务到队列中.

   
   src/core/observer/scheduler.js

4. 下图timerFunc函数的实现.timerFunc函数是把flushCallbacks添加到微任务中.当宏任务执行完毕,清空微任务队列

   
   image.png

5. 下图是flushCallbacks实现

   
   src/core/util/next-tick.js
6. flushCallbacks函数,标注 1 复制 callbacks 函数,标注2 表示copiesi其实调用的flushSchedulerQueue
   src/core/util/next-tick.js

7. 下图是 flushSchedulerQueue函数的实现.queue 队列中的 watcher 函数调用 run 函数实现更新

   
   image.png

8. 调用 watcher 函数中的 run 函数,run 函数会调用 get()函数来实现更新

   
   src/core/observer/watcher.js

9. watcher 函数中的 get 函数会调用 getter()函数,getter 函数其实就是 updateComponent 完成更新

   
   src/core/observer/watcher.js
   

   10 getter== updateComponent

   
   image.png