$nextTick 实现原理

Vue 使用 nextTick 来确保数据更新后的 DOM 操作在更新完成后执行。其核心逻辑是将回调放到微任务或宏任务队列中，确保回调在 DOM 更新完成后执行。

Vue.js 会利用不同的浏览器 API 来模拟 nextTick 的延迟执行，通常是通过：

1. Promise：在微任务队列中执行。
2. setTimeout：在宏任务队列中执行（当浏览器不支持 Promise 时）。

Vue.js 的 nextTick 会将回调函数放到合适的队列中执行。通过不同的 异步队列机制 来确保在 DOM 更新后执行回调函数。实现方式如下：

function nextTick(callback) {if (Promise) {Promise.resolve().then(callback);  // 使用 Promise 微任务队列} else if (setImmediate) {setImmediate(callback);  // 支持 setImmediate} else {setTimeout(callback, 0);  // 最终回退到 setTimeout}
}

实现流程：

1. 回调队列：callbacks 用于存储所有通过 nextTick 添加的回调函数。
2. 防止重复调用：pending 用于标记当前是否已经在等待刷新回调，避免重复调用。
3. 任务优先级选择：Promise 微任务 > MutationObserver>setTimeout（宏任务）
4. 执行回调：flushCallbacks 会执行所有的回调函数，并清空队列。

let callbacks = [];      // 存储回调函数的数组，用于收集 nextTick 的回调
let pending = false;     // 标记当前是否已经在等待刷新回调，防止多次触发function flushCallbacks() {pending = false;       // 重置标记，表示已经进入回调执行阶段// 复制回调数组，防止在执行回调时继续往 callbacks 里添加新的回调const copies = callbacks.slice(0);callbacks.length = 0;  // 清空原始回调数组// 逐个执行回调函数for (let i = 0; i < copies.length; i++) {copies[i]();}
}let timerFunc;// 优先使用 Promise 微任务，其次是 MutationObserver，最后是 setTimeout
if (typeof Promise !== 'undefined') {const p = Promise.resolve();     // 创建一个 resolved 状态的 Promise 实例timerFunc = () => {p.then(flushCallbacks);        // 使用 Promise.then 触发微任务队列中的 flushCallbacks};
} else if (typeof MutationObserver !== 'undefined') {let counter = 1;const observer = new MutationObserver(flushCallbacks);  // 使用 MutationObserver 监听数据变化触发 flushCallbacksconst textNode = document.createTextNode(String(counter)); // 创建文本节点作为观察对象observer.observe(textNode, { characterData: true });    // 监听文本节点的数据变化timerFunc = () => {counter = (counter + 1) % 2;  // 切换 counter 值，触发文本节点变化textNode.data = String(counter); // 触发 MutationObserver 回调};
} else {timerFunc = () => {setTimeout(flushCallbacks, 0); // 最后降级到使用 setTimeout 延迟执行 flushCallbacks};
}function nextTick(cb) {callbacks.push(cb);    // 将回调函数存入 callbacks 数组中if (!pending) {        // 如果没有待处理的回调任务pending = true;      // 设置标记，防止重复触发timerFunc();         // 调用 timerFunc，触发回调执行机制}
}

• callbacks 存储所有传入的回调函数。

• pending 标记防止 timerFunc 多次调用，确保只在本次任务队列完成后触发。

• flushCallbacks 函数会在 timerFunc 被触发时执行，清空原数组 callbacks 并执行所有回调函数。

• timerFunc 的优先级选择：

  • Promise：优先使用 Promise 的 then 方法，将 flushCallbacks 放入微任务队列，微任务优先于宏任务。
  • MutationObserver：在不支持 Promise 时，使用 MutationObserver 来监听文本节点变化。每次 timerFunc 被调用，都会修改文本节点内容，触发 MutationObserver 回调。
  • setTimeout：如果以上两种都不支持，使用 setTimeout（宏任务）延迟执行。

• nextTick 将传入的回调 cb 存入 callbacks 队列，并确保 flushCallbacks 仅被触发一次。