$nexttick实现前言 nextTick 是Vue的一个核心实现，$nextTick方法将回调延迟到下次DOM更新

前言

nextTick 是Vue的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue的nextTick其本质是对JavaScript执行原理EventLoop的一种应用

nextTick的核心是利用了如Promise、MutationObserver、setlmmediate、setTimeout的原生JavaScript方法来模拟对应的微/宏任务的实现，本质是为了利用JavaScript的这些异步回调任务队列来实现Vue框架中自己的异步回调队列

前置知识- js事件循环

JS运行机制

JS执行是单线程的，基于事件循环。事件循环大致分为以下步骤:

所有同步任务都在主线程上执行,形成一个执行栈。
步任务放进任务队列，异步任务分为宏任务和微任务
执行栈所有同步任务执行完成，就会执行任务队列。对应的异步任务，结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个tick,而所有的异步结果都是通过“任务队列”来调度。消息队列中存放的是一个个的任务(task) 。task 分为两大类，分别是macro task和micro task,并且每个macrotask(宏任务)结束后，都要清空所有的micro task(微任务)。

for (macroTask of macroTaskQueue) {
    //执行宏任务
    handleMacroTask();
    //执行所有微任务
    for (microTask of microTaskQueue) {
        handleMicroTask(microTask);
    }
}

宏任务: script. setTimeout. setInterval. Node中的setlmmediate 等

微任务: Promise .then、MutationObserver. Node 中的Process. nextTick等

nextTick的具体实现原理

上源码

源码分为两部分，一是判断当前环境能使用的、API 并保存异步函数，二是调用异步函数执行回调队列

timerFunc函数定义，根据当前环境支持什么方法则确定调用哪个，分别有: Promise.then、 Mutation0bserver、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:是否原生支持Promise
if (typeof Promise !== 'undefined' && isNative (Promise)) {
    //保存一个异步任务
    const p = Promise.resolve()
    timerFunc = () => {
    //执行回调函数
    p. then( flushCallbacks)
    if (isI0S) setTimeout(noop)
    isUsingMicroTask = true
} else if (lisIE & typeof MutationObserver !== 'undefined' && (
    isNative (Mutati onObserver) ||
    Mutation0bserver.toString() === '[object MutationObserverConstructor]'
)) {
  //判断2:是否原生支持MutationObserver
  let counter = 1
  const observer = new Mutation0bserver (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 (Icb && 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[]()
    }
}

把回调函数放入callbacks等待执行，将执行函数放到微任务或者宏任务中

无论是微任务还是宏任务，都会放到flushCallbacks'使用，这里将callbacks里面的函数复制一份,同时'callbacks'置空

循环遍历执行callbacks里面的函数

总结

Vue的nextTick其本质是对JavaScript执行原理EventLoop的一种应用
nextTick核心是利用了如Promise、MutationObserver、 setlmmediate. setTimeout的原生JavaScript方法来模拟对应的微/宏任务的实现，根据当前环境支持什么方法则确定调用哪个