重点关注

flushSchedulerQueue

queueWatcher

  1. /* @flow */
  3. import type Watcher from './watcher'
  4. import config from '../config'
  5. import { callHook, activateChildComponent } from '../instance/lifecycle'
  7. import {
  8.   warn,
  9.   nextTick,
  10.   devtools,
  11.   inBrowser,
  12.   isIE
  13. } from '../util/index'
  15. export const MAX_UPDATE_COUNT = 100
  17. const queue: Array<Watcher> = [] //记录观察者队列的数组
  18. const activatedChildren: Array<Component> = []  //记录活跃的子组件
  19. /*一个哈希表，用来存放watcher对象的id，防止重复的watcher对象多次加入*/
  20. let has: { [key: number]: ?true } = {}
  21. let circular: { [key: number]: number } = {} //持续循环更新的次数，如果超过100次 则判断已经进入了死循环，则会报错
  22. let waiting = false //观察者在更新数据时候 等待的标志
  23. let flushing = false //进入flushSchedulerQueue 函数等待标志
  24. let index = 0 //queue 观察者队列的索引
  26. /**
  27.  * Reset the scheduler's state.
  28.  */
  29. /*重置调度者的状态*/
  30. function resetSchedulerState () {
  31.   index = queue.length = activatedChildren.length = 0
  32.   has = {}
  33.   if (process.env.NODE_ENV !== 'production') {
  34.     circular = {}
  35.   }
  36.   waiting = flushing = false
  37. }
  39. // Async edge case #6566 requires saving the timestamp when event listeners are
  40. // attached. However, calling performance.now() has a perf overhead especially
  41. // if the page has thousands of event listeners. Instead, we take a timestamp
  42. // every time the scheduler flushes and use that for all event listeners
  43. // attached during that flush.
  44. /*
  45. * 异步边缘事件＃6566需要在连接事件侦听器时保存时间戳。
  46. * 但是，调用performance.now（）会产生性能开销，特别是在页面具有数千个事件侦听器的情况下。
  47. * 取而代之的是，每次调度程序刷新时，我们都会使用一个时间戳，
  48. * 并将其用于该刷新期间附加的所有事件侦听器。
  49. * */
  50. export let currentFlushTimestamp = 0
  52. // Async edge case fix requires storing an event listener's attach timestamp.
  53. // 获取时间戳
  54. let getNow: () => number = Date.now
  56. // Determine what event timestamp the browser is using. Annoyingly, the
  57. // timestamp can either be hi-res (relative to page load) or low-res
  58. // (relative to UNIX epoch), so in order to compare time we have to use the
  59. // same timestamp type when saving the flush timestamp.
  60. // All IE versions use low-res event timestamps, and have problematic clock
  61. // implementations (#9632)
  63. //确定浏览器使用的是什么事件时间戳。
  64. // 恼人的是，时间戳可以是hi-res（相对于页面加载）或low-res（相对于UNIX epoch），
  65. // 所以为了比较时间，我们在保存刷新时间戳时必须使用相同的时间戳类型。
  66. // 所有IE版本都使用low-res的事件时间戳，并且有问题的时钟实现(#9632)
  68. if (inBrowser && !isIE) {
  69.   const performance = window.performance
  70.   if (
  71.     performance &&
  72.     typeof performance.now === 'function' &&
  73.     getNow() > document.createEvent('Event').timeStamp
  74.   ) {
  75.     // if the event timestamp, although evaluated AFTER the Date.now(), is
  76.     // smaller than it, it means the event is using a hi-res timestamp,
  77.     // and we need to use the hi-res version for event listener timestamps as
  78.     // well.
  79.     /*
  80.       如果事件的时间戳虽然是在Date.now()之后评估的，
  81.       但比它小，这意味着事件使用的是hi-res时间戳，
  82.       我们需要对事件监听器的时间戳也使用hi-res版本。
  83.     * */
  84.     getNow = () => performance.now()
  85.   }
  86. }
  88. /**
  89.  * Flush both queues and run the watchers.
  90.  * 清空队列和运行watchers
  91.  */
  92. function flushSchedulerQueue () {
  93.   currentFlushTimestamp = getNow()
  94.   flushing = true
  95.   let watcher, id
  97.   // Sort queue before flush.
  98.   // This ensures that:
  99.   // 1. Components are updated from parent to child. (because parent is always
  100.   //    created before the child)
  101.   // 2. A component's user watchers are run before its render watcher (because
  102.   //    user watchers are created before the render watcher)
  103.   // 3. If a component is destroyed during a parent component's watcher run,
  104.   //    its watchers can be skipped.
  105.   /*
  106.     在清空前对队列进行排序，这样做可以保证：
  107.     1.组件更新的顺序是从父组件到子组件的顺序，因为父组件总是比子组件先创建。
  108.     2.一个组件的user watchers比render watcher先运行，
  109.     因为user watchers往往比render watcher更早创建
  110.     3.如果一个组件在父组件watcher运行期间被销毁，它的watcher执行将被跳过。
  111.   */
  112.   queue.sort((a, b) => a.id - b.id)
  114.   // do not cache length because more watchers might be pushed
  115.   // as we run existing watchers
  116.   // 这里不用index = queue.length;index > 0; index--的方式写
  117.   // 是因为不要将length进行缓存，
  118.   // 因为在执行处理现有watcher对象期间，
  119.   // 更多的watcher对象可能会被push进queue
  120.   for (index = 0; index < queue.length; index++) {
  121.     watcher = queue[index]
  122.     if (watcher.before) {
  123.       watcher.before()
  124.     }
  125.     id = watcher.id
  126.     /*将has的标记删除*/
  127.     has[id] = null
  128.     /*执行watcher*/
  129.     watcher.run()
  130.     // in dev build, check and stop circular updates.
  131.     /*
  132.       在测试环境中，检测watch是否在死循环中
  133.       比如这样一种情况
  134.       watch: {
  135.         test () {
  136.           this.test++;
  137.         }
  138.       }
  139.       持续执行了一百次watch代表可能存在死循环
  140.     */
  141.     if (process.env.NODE_ENV !== 'production' && has[id] != null) {
  142.       circular[id] = (circular[id] || 0) + 1
  143.       if (circular[id] > MAX_UPDATE_COUNT) {
  144.         warn(
  145.           'You may have an infinite update loop ' + (
  146.             watcher.user
  147.               ? `in watcher with expression "${watcher.expression}"`
  148.               : `in a component render function.`
  149.           ),
  150.           watcher.vm
  151.         )
  152.         break
  153.       }
  154.     }
  155.   }
  157.   // keep copies of post queues before resetting state
  158.   /*在重置状态之前保留post队列的副本*/
  159.   const activatedQueue = activatedChildren.slice()
  160.   const updatedQueue = queue.slice()
  162.   resetSchedulerState()
  164.   // call component updated and activated hooks
  165.   /*使子组件状态都改编成active同时调用activated钩子*/
  166.   callActivatedHooks(activatedQueue)
  167.   callUpdatedHooks(updatedQueue)
  169.   // devtool hook
  170.   /* istanbul ignore if */
  171.   if (devtools && config.devtools) {
  172.     devtools.emit('flush')
  173.   }
  174. }
  175. /*调用updated钩子*/
  176. function callUpdatedHooks (queue) {
  177.   let i = queue.length
  178.   while (i--) {
  179.     const watcher = queue[i]
  180.     const vm = watcher.vm //获取到虚拟dom
  181.     //判断watcher与vm._watcher 相等 _isMounted已经更新触发了 mounted 钩子函数
  182.     if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {
  183.       callHook(vm, 'updated')
  184.     }
  185.   }
  186. }
  188. /**
  189.  * Queue a kept-alive component that was activated during patch.
  190.  * The queue will be processed after the entire tree has been patched.
  191.  */
  192. /*
  193.  在patch期间被激活（activated）的keep-alive组件保存在队列中，
  194.  队列将在整个树被patch之后处理
  195. */
  196. export function queueActivatedComponent (vm: Component) {
  197.   // setting _inactive to false here so that a render function can
  198.   // rely on checking whether it's in an inactive tree (e.g. router-view)
  199.   vm._inactive = false
  200.   activatedChildren.push(vm)
  201. }
  202. /*使子组件状态都改编成active同时调用activated钩子*/
  203. function callActivatedHooks (queue) {
  204.   for (let i = 0; i < queue.length; i++) {
  205.     queue[i]._inactive = true
  206.     //判断是否有不活跃的组件 禁用他 如果有活跃组件则触发钩子函数activated
  207.     activateChildComponent(queue[i], true /* true */)
  208.   }
  209. }
  211. /**
  212.  * Push a watcher into the watcher queue.
  213.  * Jobs with duplicate IDs will be skipped unless it's
  214.  * pushed when the queue is being flushed.
  215.  */
  216. /*
  217.   将一个观察者对象push进观察者队列，
  218.   在队列中已经存在相同的id则该观察者对象将被跳过，
  219.   除非它是在队列被刷新时推送
  220. */
  221. export function queueWatcher (watcher: Watcher) {
  222.   /*获取watcher的id*/
  223.   const id = watcher.id
  224.   /*检验id是否存在，已经存在则直接跳过，不存在则标记哈希表has，用于下次检验*/
  225.   if (has[id] == null) {
  226.     has[id] = true
  227.     if (!flushing) {
  228.       /*如果队列没有处于清空状态，直接push到队列中即可*/
  229.       queue.push(watcher)
  230.     } else {
  231.       // if already flushing, splice the watcher based on its id
  232.       // if already past its id, it will be run next immediately.
  233.       // 如果队列正在清空，根据watcher的id大小插入到队列
  234.       // 如果watcher的id是最小的，将会排在队列的第一个，将会立即执行
  235.       /*
  236.       * 在遍历的时候每次都会对 queue.length 求值，
  237.       * 因为在 watcher.run() 的时候，很可能用户会再次添加新的watcher，
  238.       * 也就是会再次执行queueWatcher方法
  239.       * */
  240.       let i = queue.length - 1
  241.       while (i > index && queue[i].id > watcher.id) {
  242.         i--
  243.       }
  244.       queue.splice(i + 1, 0, watcher)
  245.     }
  246.     // queue the flush
  247.     if (!waiting) {
  248.       // 如果没有重置队列，就不执行
  249.       waiting = true
  250.       /*
  251.         异步执行更新。目的是由Vue Test Utils使用。
  252.         如果设置为 "false"，将大大降低性能。
  253.       */
  254.       if (process.env.NODE_ENV !== 'production' && !config.async) {
  255.         flushSchedulerQueue()
  256.         return
  257.       }
  258.       // 异步执行watcher队列
  259.       nextTick(flushSchedulerQueue)
  260.     }
  261.   }
  262. }
  264. /*
  265.   将watcher插入队列的方法
  266.   id重复的会跳过，id较小的会被按照顺序排列到最前
  267.   保证id最小的watcher最先执行更新
  269.   每次插入watcher就会去清空队列，为了避免反复执行清空
  270.   使用waiting作为是否在清空队列的标记
  272.   flushing也是表示正在清空队列
  273.   当清空队列时，也可以插入watcher，但是要排序
  274.   不在清空状态时，就直接push
  275. * */