前言nextTick 是 Vue 的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。 nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列 前置知识 - js事件循环JS 运行机制JS 执行是单线程的，基于事件循环。事件循环大致分为以下步骤： 所有同步任务都在主线程上执行，形成一个执行栈。异步任务放进任务队列，异步任务分为宏任务和微任务执行栈所有同步任务执行完成，就会执行任务队列。对应的异步任务，结束等待状态，进入执行栈，开始执行。主线程不断重复上面的第三步。主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。 消息队列中存放的是一个个的任务（task）。 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task(宏任务) 结束后，都要清空所有的 micro task(微任务)。 如图所示 for (macroTask of macroTaskQueue) { // 执行宏任务 handleMacroTask(); // 执行所有微任务 for (microTask of microTaskQueue) { handleMicroTask(microTask); }} 宏任务： script、setTimeout、setInterval、Node中的setImmediate 等微任务： Promise.then、MutationObserver、Node 中的 Process.nextTick等 nextTick的具体实现原理上源码 源码分为两部分，一是判断当前环境能使用的 API 并保存异步函数，二是调用异步函数执行回调队列 timerFunc函数定义，根据当前环境支持什么方法则确定调用哪个，分别有： Promise.then`、`MutationObserver`、`setImmediate`、`setTimeout 通过上面任意一种方法，进行降级操作 export let isUsingMicroTask = false const callbacks = [] // 回调队列let pending = false// 该方法执行队列中的全部回调function flushCallbacks () { pending = false const copies = callbacks.slice(0) callbacks.length = 0 // 执行任务队列 for (let i = 0; i < copies.length; i++) { copies[i]() }}let timerFunc // 用来保存调用异步任务方法// 判断1：是否原生支持Promiseif (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) || MutationObserver.toString() === '[object MutationObserverConstructor]')) { // 判断2：是否原生支持MutationObserver 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} else if (typeof setImmediate !== 'undefined' && isNative(setImmediate)) { //判断3：是否原生支持setImmediat timerFunc = () => { setImmediate(flushCallbacks) }} else { //判断4：上面都不行，直接用setTimeout timerFunc = () => { setTimeout(flushCallbacks, 0) }} 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);   } });​  // 执行异步延迟函数 timerFunc  if (!pending) {    pending = true;    timerFunc(); }​  // 当 nextTick 没有传入函数参数的时候，返回一个 Promise 化的调用  if (!cb && typeof Promise !== 'undefined') {    return new Promise(resolve => {      _resolve = resolve;   }); }} callbacks就是异步操作队列 callbacks新增回调函数后又执行了timerFunc函数，pending是用来标识同一个时间只能执行一次 function flushCallbacks () {  pending = false  const copies = callbacks.slice(0)  callbacks.length = 0  for (let i = 0; i < copies.length; i++) {    copies[i]() }} 把回调函数放入callbacks等待执行，将执行函数放到微任务或者宏任务中 无论是微任务还是宏任务，都会放到flushCallbacks使用，这里将callbacks里面的函数复制一份，同时callbacks置空 循环遍历执行callbacks里面的函数 总结Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用nextTick核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，根据当前环境支持什么方法则确定调用哪个 作者：小希学前端链接：https://juejin.cn/post/7314493016497684520