当监听者发现被观察者发生了变化,则会通过 queueWatcher 加入一个更新队列,如果设置了 sync 则会直接触发 update

    1. // has 已经入队的 watcher id 集合
    2. // queue 已经入队的 watcher 集合
    3. // flushing 代表是否正在更新
    4. // waiting 队列是否有已经清空,仅在清空后为 false
    5. export function queueWatcher (watcher: Watcher) {
    6. // 需要入队的 watcher
    7. const id = watcher.id
    8. // 如果 watcher 之前未入队
    9. if (has[id] == null) {
    10. // 设置该 watcher 已经入队
    11. has[id] = true
    12. // 如果不是正在执行更新中,则将 watcher 直接入队
    13. if (!flushing) {
    14. queue.push(watcher)
    15. } else {
    16. // 如果正在执行更新中,则先找到其优先级,再入队
    17. let i = queue.length - 1
    18. while (i > index && queue[i].id > watcher.id) {
    19. i--
    20. }
    21. queue.splice(i + 1, 0, watcher)
    22. }
    23. // 在一次队列操作中,只有刚开始的 watcher 入队之前为 false,也就是意味着,一次更新队列的操作过程中,下面的代码只会执行一次
    24. if (!waiting) {
    25. // 当前已经处于异步更新等待的状态
    26. waiting = true
    27. if (process.env.NODE_ENV !== 'production' && !config.async) {
    28. flushSchedulerQueue()
    29. return
    30. }
    31. // nextTick 可以简单的认为是用异步事件执行函数,所以意味着在一次同步事件循环结束后便会立刻执行更新
    32. nextTick(flushSchedulerQueue)
    33. }
    34. }
    35. }