A brief analysis of Vue's asynchronous update of DOM

// src > core > observer > watcher.js + scheduler.js // When a Data is updated, the following code will be executed in sequence // 1. Trigger Data.set
// 2. Call dep.notify
// 3. Dep will traverse all related Watchers and execute the update method class Watcher {
  // 4. Execute update operation update() {
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
  // 5. Add the current Watcher to the asynchronous queue queue.push(watcher);
  // 6. Execute the asynchronous queue and pass in the callback nextTick(flushSchedulerQueue);
}

// Specific method for updating the view function flushSchedulerQueue() {
  let watcher, id;
  // Sort, render the parent node first, then render the child node // This can avoid unnecessary child node rendering, such as: the child node whose v-if is false in the parent node does not need to be rendered queue.sort((a, b) => a.id - b.id);
  // Traverse all Watchers for batch update.
  for (index = 0; index < queue.length; index++) {
    watcher = queue[index];
    // Update the DOM
    watcher.run();
  }
} 

const callbacks = [];
let timerFunc;

function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  // 1. Add the passed flushSchedulerQueue method to the callback array callbacks.push(() => {
    cb.call(ctx);
  });
  // 2. Execute asynchronous tasks // This method will select different asynchronous strategies timerFunc() according to browser compatibility;
}

let timerFunc;
// Determine whether it is compatible with Promise
if (typeof Promise !== "undefined") {
  timerFunc = () => {
    Promise.resolve().then(flushCallbacks);
  };
  // Determine whether it is compatible with MutationObserver
  // https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver
} else if (typeof MutationObserver !== "undefined") {
  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);
  };
  // Determine whether it is compatible with setImmediate
  // This method exists in some IE browsers} else if (typeof setImmediate !== "undefined") {
  // This is a macro task, but better than setTimeout timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // If none of the above methods are known, use setTimeout 0
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// After asynchronous execution, execute all callback methods, that is, execute flushSchedulerQueue
function flushCallbacks() {
  for (let i = 0; i < copies.length; i++) {
    callbacks[i]();
  }
} 

// We use this.$nextTick to call the nextTick method Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};