Vue2源码解析系列-调度系统（todo）

status: Idea Created time: January 27, 2024 4:55 PM

Vue调度系统

Vue.js 以其高效、灵活的响应式系统著称，而这背后，离不开调度系统（Scheduler）的精妙设计。它负责协调 Vue 应用的更新过程，确保视图与数据的同步，并维护整体的性能表现。

调度系统的核心职责：

• 管理 watchers（监听器），当数据发生变化时，通知相关的 watchers 执行。

• 执行组件更新，包括重新计算属性、渲染模板、更新 DOM 等。

• 控制更新的批处理，将多次更新合并为一次，减少 DOM 操作，提升性能。

• 处理异步操作，保证数据的一致性和更新的顺序。

如何执行更新

首先需要知道，vue不是即使更新的，当你更新某个状态时，对应的依赖并不会马上进行更新，而是会先存起来，然后每间隔一段时间再统一进行批量更新，这种方式主要是为了优化性能，特别是更新组件时，vue需要进行diff虚拟DOM和更新DOM，这些操作是非常影响性能的，倘若状态一改变就立马更新，那么就很可能遇到这种情况：

{
	for(let i=0;i<100;i++){
		this.num++;
	}
}

this.num更新了100次，然而其实只有最后一次才是我们需要的，前面99次都是没用的，然后假如vue是即使更新的，那么vue就会做了99次无用功。

vue实际上会通过一个队列（callbacks）来暂存watcher，每当有组件、监听器或计算属性等需要更新时，就会将其对应的更新函数按照wathcer.id排序放到这个队列中，之后按照一定规律进行批量更新。下面是vue2将需要更新的watcher入队的函数代码：

const queue: Array<Watcher> = []

export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  if (has[id] != null) {
    return
  }

  if (watcher === Dep.target && watcher.noRecurse) {
    return
  }

  has[id] = true
  if (!flushing) {
    queue.push(watcher)
  } else {
    // if already flushing, splice the watcher based on its id
    // if already past its id, it will be run next immediately.
    let i = queue.length - 1
    while (i > index && queue[i].id > watcher.id) {
      i--
    }
    queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true

    if (__DEV__ && !config.async) {
      flushSchedulerQueue()
      return
    }
    nextTick(flushSchedulerQueue)
  }
}

从代码中可以看到：

1. 首先通过watcher.id进行去重，这是为了避免重复更新

2. 如果当前 watcher 是触发更新的 watcher 本身，并且它禁止递归触发，就直接返回，避免无限循环。

3. 判断当前是否正在更新中

   1. 如果不是

      1. 那么直接将watcher对象添加至队尾

   2. 如果是

      1. 根据wather.id将watcher排序到队列对应的位置，id越小越靠前

callback数组保存了模板语法、计算属性、监听器等等更新方法，在适当的时机执行这些更新方法，来进行更新操作。

export function queueWatcher(watcher: Watcher) {
  const id = watcher.id
  if (has[id] != null) {
    return
  }

  if (watcher === Dep.target && watcher.noRecurse) {
    return
  }

  has[id] = true
  if (!flushing) {
    queue.push(watcher)
  } else {
    // if already flushing, splice the watcher based on its id
    // if already past its id, it will be run next immediately.
    let i = queue.length - 1
    while (i > index && queue[i].id > watcher.id) {
      i--
    }
    queue.splice(i + 1, 0, watcher)
  }
  // queue the flush
  if (!waiting) {
    waiting = true

    if (__DEV__ && !config.async) {
      flushSchedulerQueue()
      return
    }
    nextTick(flushSchedulerQueue)
  }
}

更新的时机