Vue2源码学习笔记之观察者的执行

// ! 同步执行，不需要调用 nextTick 执行观察者 -> 用于 watch 自定义的观察者
else if (this.sync) {
  this.run()
}

new Vue({
  watch: {
    someWatch: {
      handler() {
        /* ... */
      },
      sync: true,
    },
  },
});

run() {
  if (this.active) {
    const value = this.get() // ! 获取值 -> 执行 getter，如果执行的是 updateComponent，返回 undefined
    if (
      value !== this.value ||
      // Deep watchers and watchers on Object/Arrays should fire even
      // when the value is the same, because the value may
      // have mutated.
      isObject(value) ||
      this.deep
    ) {
      // set new value
      const oldValue = this.value // ! 缓存旧值
      this.value = value // ! 旧值更新为新值
      // ! 处理用户定义的观察者，比如 watch $watch
      if (this.user) {
        try {
          this.cb.call(this.vm, value, oldValue) // ! 传入新旧值，执行回调函数更新视图
        } catch (e) {
          handleError(e, this.vm, `callback for watcher "${this.expression}"`)
        }
      } else {
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}

export default {
  // ...
  /**
   * Perform updates asynchronously. Intended to be used by Vue Test Utils
   * This will significantly reduce performance if set to false.
   */
  async: true,
};

export function queueWatcher(watcher: Watcher) {
  // ...
  if (!waiting) {
    // ...
    // ! 同步执行，主要用于非生产环境中测试代码
    if (process.env.NODE_ENV !== "production" && !config.async) {
      flushSchedulerQueue(); // ! 直接执行
      return;
    }
    nextTick(flushSchedulerQueue); // ! 使用 nextTick 执行队列的回调函数
  }
}

function flushSchedulerQueue() {
  // ...
  queue.sort((a, b) => a.id - b.id); // 队列中元素升序排序
}

notify() {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
 
    // ! 同步执行观察者，不是异步队列全部入队后一起执行
    // ! 需要按照顺序来执行，主要用于非生产环境中测试代码
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id) // ! id 升序排序
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }

// ! 异步执行，需要调用 nextTick 执行观察者 => 用于执行自动收集的依赖
else {
  queueWatcher(this) // ! 使用异步队列更新
}

let has: { [key: number]: ?true } = {};
let waiting = false; // ! 等待标识
let flushing = false; // ! 队列是否正在执行更新
const queue: Array<Watcher> = [];
export function queueWatcher(watcher: Watcher) {
  const id = watcher.id;
  if (has[id] == null) {
    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); // ! 从后面开始查找，插入到第一个比它 id 小的元素后面
    }
 
    // ...
  }
}

// queue the flush
// ! waiting 标识，保证只执行一次
if (!waiting) {
  waiting = true;
 
  // ! 同步执行，主要用于非生产环境中测试代码
  if (process.env.NODE_ENV !== "production" && !config.async) {
    flushSchedulerQueue(); // ! 直接执行
    return;
  }
  nextTick(flushSchedulerQueue); // ! 使用 nextTick 执行队列的回调函数
}

nextTick(fn);

// ! 回调函数，明面上不分 microtasks 和 (macro)tasks 了，按照下面的优先级来实现
// ! 优先级（性能高低） Promise -> MutationObserver -> setImmediate -> setTimeout
let timerFunc;
 
// ! Promise
if (typeof Promise !== "undefined" && isNative(Promise)) {
  const p = Promise.resolve();
  timerFunc = () => {
    p.then(flushCallbacks);
    if (isIOS) setTimeout(noop);
  };
  isUsingMicroTask = true;
} else if (
  !isIE &&
  typeof MutationObserver !== "undefined" &&
  (isNative(MutationObserver) ||
    // PhantomJS and iOS 7.x
    MutationObserver.toString() === "[object MutationObserverConstructor]")
) {
  let counter = 1;
  const observer = new MutationObserver(flushCallbacks);
  const textNode = document.createTextNode(String(counter));
  observer.observe(textNode, {
    characterData: true,
  });
  timerFunc = () => {
    counter = (counter + 1) % 2;
    textNode.data = String(counter);
  };
  isUsingMicroTask = true;
  // ! setImmediate
} else if (typeof setImmediate !== "undefined" && isNative(setImmediate)) {
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // Fallback to setTimeout.
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

const callbacks = []; // ! 回调函数组成的数组
let pending = false; // ! 队列是否等待执行，false 表示队列为空，不用等待
 
// ! 执行 callbacks 的所有的回调函数
function flushCallbacks() {
  pending = false; // ! 重置 pending
  const copies = callbacks.slice(0); // ! 拷贝副本
  callbacks.length = 0; // ! 清空 callbacks
  // ! 执行拷贝副本的所有回调函数
  for (let i = 0; i < copies.length; i++) {
    copies[i]();
  }
}

export function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
 
  // ! 把 cb 包装成一个函数，并放入 callbacks 数组中
  callbacks.push(() => {
    if (cb) {
      try {
        cb.call(ctx);
      } catch (e) {
        handleError(e, ctx, "nextTick");
      }
    } else if (_resolve) {
      _resolve(ctx);
    }
  });
 
  // ! 判断数组是否等待执行
  if (!pending) {
    pending = true;
    timerFunc(); // ! 执行异步函数
  }
 
  // $flow-disable-line
  // ! nextTick 没有传入回调函数时，提供一个 Promise 化的调用
  if (!cb && typeof Promise !== "undefined") {
    return new Promise((resolve) => {
      _resolve = resolve;
    });
  }
}

function flushCallbacks() {
  pending = false; // ! 重置 pending
  // ...
}