$nextTick

Sat, 05 Oct 2024 00:00:00 +0800

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 on Last Stand

$nextTick

前置知识 - js事件循环

JS 运行机制