Vue3 中，有时当我们去改变数据操作 Dom 结构时并未生效，这时就需要使用 nextTick，这是什么原因呢？它与事件循环又有什么关系呢？让我们一步一步来看。
让我们先看下事件循环。
一、事件循环
众所周知，JavaScript 是单线程的，那为什么呢？，比如 JavaScript 是多线程的，那么比如有两个线程，第一个线程对 Dom 进行增加操作，第二个线程对 Dom 进行删除操作，那么这时浏览器就不知道该怎么办了。
那既然 JavaScript 是单线程的，就随之而来产生另一个问题：当进行一个耗时比较长的任务时（比如加载一个高清图片）它会阻塞代码的执行，这对用户而言是没有办法接收的或是容忍不了的。所以为解决这个问题就产生了事件循环。在说事件循环之前，让我们看一下同步任务和异步任务。
同步任务
由上向下执行的 JavaScript 代码。
异步任务
异步任务又分为宏任务和微任务。
宏任务：setTimeout，setInterval，JavaScript整体代码（包含同步任务），ajax，postMessage，JavaScript中的交互事件。 微任务：Promise.then catch finally，MutaionObserver，process.nextTick(Nodejs环境下)。
事件循环
话不多说，上图：
二、nextTick
使用方法
第一种：传入一个回调函数，在这个回调函数里对 Dom 进行操作。
nextTick(() => {
// 所要进行的 Dom 操作
});
第二种：使用 async 和 await。await nextTick() 之后的都为异步代码。
const test = async () => {
...... // 同步代码
await nextTick();
// 异步代码，所要进行的 Dom 操作
......
};
接下来让我们分析一下为什么有时候当对数据进行操作后，Dom 并没有更新。原因就是在 Vue3 中，对数据的响应式是同步的，而 Dom 的更新则是异步的。让我们看一个栗子：
<template>
<div>
{{ const }}
</div>
</template>
<script setup>
const const = ref(0);
watch(
const,
(newVal) => {
console.log(newVal);
}
)
let i;
for (i = 0; i < 1000; i++) {
const.value++;
}
</script>
大家可能以为 const 会从 1 开始一直输出，其实并不是，最后结果只输出了 1000，而 Dom 也只渲染了一次。 那么就会产生开始说的那个问题，当数据改变的时候，有时候 Dom 并没有更新。因为 Dom 的更新是异步的，它会在所有的同步代码执行完毕后再进行执行。这时就可以使用 nextTick 将同步代码转为异步代码，这样就会在浏览器下一个事件循环（tick）中执行该异步代码从而进行 Dom 的更新。那，接下来让我们看看 nextTick在源码中是怎么实现的。
三、nextTick 源码解析
位置：core-main/packages/runtime-core/src/scheduler.ts
const resolvedPromise = /*#__PURE__*/ Promise.resolve() as Promise<any>
let currentFlushPromise: Promise<void> | null = null
export function nextTick<T = void, R = void>(
this: T,
fn?: (this: T) => R,
): Promise<Awaited<R>> {
const p = currentFlushPromise || resolvedPromise
return fn ? p.then(this ? fn.bind(this) : fn) : p
}
哦~，看到这儿，原来如此，它是把一个同步的代码块使用 Promise 包装了一下从而变成了一个异步任务。这也解释了为什么我们可以通过 async 和 await 的方式使用 nextTick。
Tips：Vue3 中把 Dom 的更新设置为异步的主要原因是考虑到性能优化的问题，比如当一个数据变化 100000 次，总不能让 Dom 也更新这么多次，这就造成太多的性能浪费了。
