当监听者发现被观察者发生了变化,则会通过 queueWatcher
加入一个更新队列,如果设置了 sync
则会直接触发 update
// has 已经入队的 watcher id 集合
// queue 已经入队的 watcher 集合
// flushing 代表是否正在更新
// waiting 队列是否有已经清空,仅在清空后为 false
export function queueWatcher (watcher: Watcher) {
// 需要入队的 watcher
const id = watcher.id
// 如果 watcher 之前未入队
if (has[id] == null) {
// 设置该 watcher 已经入队
has[id] = true
// 如果不是正在执行更新中,则将 watcher 直接入队
if (!flushing) {
queue.push(watcher)
} else {
// 如果正在执行更新中,则先找到其优先级,再入队
let i = queue.length - 1
while (i > index && queue[i].id > watcher.id) {
i--
}
queue.splice(i + 1, 0, watcher)
}
// 在一次队列操作中,只有刚开始的 watcher 入队之前为 false,也就是意味着,一次更新队列的操作过程中,下面的代码只会执行一次
if (!waiting) {
// 当前已经处于异步更新等待的状态
waiting = true
if (process.env.NODE_ENV !== 'production' && !config.async) {
flushSchedulerQueue()
return
}
// nextTick 可以简单的认为是用异步事件执行函数,所以意味着在一次同步事件循环结束后便会立刻执行更新
nextTick(flushSchedulerQueue)
}
}
}