vue はリアルタイムで dom を更新しますか?

// src > core > observer > watcher.js + scheduler.js// 当一个 Data 更新时，会依次执行以下代码
// 1. 触发 Data.set
// 2. 调用 dep.notify
// 3. Dep 会遍历所有相关的 Watcher 执行 update 方法
class Watcher {
  // 4. 执行更新操作
  update() {
    queueWatcher(this);
  }
}

const queue = [];

function queueWatcher(watcher: Watcher) {
  // 5. 将当前 Watcher 添加到异步队列
  queue.push(watcher);
  // 6. 执行异步队列，并传入回调
  nextTick(flushSchedulerQueue);
}

// 更新视图的具体方法
function flushSchedulerQueue() {
  let watcher, id;
  // 排序，先渲染父节点，再渲染子节点
  // 这样可以避免不必要的子节点渲染，如：父节点中 v-if 为 false 的子节点，就不用渲染了
  queue.sort((a, b) => a.id - b.id);
  // 遍历所有 Watcher 进行批量更新。
  for (index = 0; index <blockquote data-pid="PSfhlM9Q"></blockquote><div class="highlight"></div><p data-pid="iRogEw4w">2.2 nextTick -- 受信したflushSchedulerQueueをコールバック配列に追加し、timerFuncメソッドを実行します。 <img src="https://img.php.cn/upload/image/532/584/431/1671083781908087.png" title="1671083781908087.png" alt="vue はリアルタイムで dom を更新しますか?"></p><pre class="brush:php;toolbar:false">const callbacks = [];
let timerFunc;

function nextTick(cb?: Function, ctx?: Object) {
  let _resolve;
  // 1.将传入的 flushSchedulerQueue 方法添加到回调数组
  callbacks.push(() => {
    cb.call(ctx);
  });
  // 2.执行异步任务
  // 此方法会根据浏览器兼容性，选用不同的异步策略
  timerFunc();
}

let timerFunc;
// 判断是否兼容 Promise
if (typeof Promise !== "undefined") {
  timerFunc = () => {
    Promise.resolve().then(flushCallbacks);
  };
  // 判断是否兼容 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);
  };
  // 判断是否兼容 setImmediate
  // 该方法存在一些 IE 浏览器中
} else if (typeof setImmediate !== "undefined") {
  // 这是一个宏任务，但相比 setTimeout 要更好
  timerFunc = () => {
    setImmediate(flushCallbacks);
  };
} else {
  // 如果以上方法都不知道，使用 setTimeout 0
  timerFunc = () => {
    setTimeout(flushCallbacks, 0);
  };
}

// 异步执行完后，执行所有的回调方法，也就是执行 flushSchedulerQueue
function flushCallbacks() {
  for (let i = 0; i <p data-pid="dQWmc_nO"></p><div class="highlight"></div><p data-pid="AIne5ybj">2.4 論理的判断の改善<img src="https://img.php.cn/upload/image/752/824/242/1671083793545309.png" title="1671083793545309.png" alt="vue はリアルタイムで dom を更新しますか?"></p>2.4.1 has 識別子を判断して、同じウォッチャーをキューに追加しないようにします。<p data-pid="AIne5ybj"></p>2.4.2 すべてのウォッチャーを 1 ティックで更新できるように待機フラグを決定します; <p data-pid="7TkhHcvR"></p>2.4.3 ウォッチャーのレンダリング時に生成される可能性のある新しいウォッチャーを処理するフラッシュ フラグを決定します。 <p data-pid="Rma8bEoK"></p> v-if 条件がトリガーされると、新しい Watcher がレンダリングされます。 <p data-pid="O_FBWrsz"></p><p data-pid="0jYEMq_x"></p><p data-pid="7fKFXAwF">ヒント: nextTick は、Promise、setTimeout、その他のメソッドを通じて単純にシミュレートされた非同期タスクです。 <img src="https://img.php.cn/upload/image/646/390/740/1671083804816099.png" title="1671083804816099.png" alt="vue はリアルタイムで dom を更新しますか?"></p><p data-pid="7fKFXAwF">3. this.$nextTick が更新された DOM を取得できるのはなぜですか? </p><p data-pid="ZKUBUXWF"><strong> this.$nextTick を呼び出すと、実際には図の nextTick メソッドが呼び出され、非同期キュー内のコールバック関数が実行されます。先入れ先出しの原則に従い、Data の変更によってトリガーされる更新非同期キューが最初に実行され、実行が完了した後、新しい DOM が生成されます。次に、this.$nextTick のコールバック関数が指定されると、実行すると、更新された DOM 要素を取得できます。 </strong></p><pre class="brush:php;toolbar:false">// 我们使用 this.$nextTick 其实就是调用 nextTick 方法
Vue.prototype.$nextTick = function (fn: Function) {
  return nextTick(fn, this);
};