如题，nextTick的回调是在下一次事件循环被执行的吗？
是不是下一次事件循环取决于nextTick的实现，如果是用的微任务，那么就是本次事件循环；否则如果用的是宏任务，那么就是下一次事件循环。
我们看下Vue3中nextTick的源码：
export function nextTick<T = void, R = void>(this: T,fn?: (this: T) => R,
): Promise<Awaited<R>> {const p = currentFlushPromise || resolvedPromisereturn fn ? p.then(this ? fn.bind(this) : fn) : p
}
可以看到它的实现就是使用Promise，所以妥妥的微任务，所以nextTick的回调一定是在当前事件循环的微任务阶段被执行的，而不是下一次事件循环。
但是在之前的版本中，nextTick可能会使用setTimeout，源码我们就不贴了。既然使用了setTimeout，就是宏任务，那自然就是下一次事件循环了。
可能是因为nextTick这个名字已经深入人心，所以Vue并没有要更改的意思。
那么接下来问题来了！
既然nextTick是本次事件循环，也就是说页面还没有渲染，那么为什么nextTick的回调可以获取到计算后的DOM结果呢？
这个问题真的困扰了我一段时间？
然后我做了个实验，实验代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head>
<body><button onclick="doClick()">点击</button><h1>Hello</h1>
<script>function doClick() {document.querySelector('h1').innerText = 'Hi'alert(document.querySelector('h1').innerText)}
</script>
</body>
</html>
这是纯HTML代码，不是Vue的代码。
你猜一下点击完按钮会发生什么？
结果如下：
点击确定后：
我们来解释一下为什么是这个结果。
- 首先我们点击按钮，触发了doClick事件，这是一个宏任务。
- 我们在这个宏任务中修改了h1的元素内容为Hi，这是一个同步操作，所以DOM的计算是立刻发生的。因此我们接下来通过alert正确打印了更新后的内容Hi。
- 但是alert阻止了浏览器的渲染，所以页面看到的还是Hello。
- 当我们点击确定之后，宏任务doClick执行结束，浏览器开始渲染，页面的内容也被更新成了Hi。
总结下来就一句话，就是DOM的计算是立刻发生的，所以可以立刻获取到结果，但是渲染是异步的。
回到nextTick，nextTick为啥能获取到计算后的DOM结果呢？
原因就是nextTick是在异步更新队列之后执行，此时真实的DOM操作已经执行了，所以就可以读取到计算后的DOM结果了。
跟nextTick是不是下一次事件循环没有关系，跟浏览器是不是已经渲染了没有关系。
![[Vue]Vue3从入门到精通-综合案例分析](https://img-home.csdnimg.cn/images/20230724024159.png?origin_url=C%3A%5CUsers%5Cxiao%5CAppData%5CRoaming%5CTypora%5Ctypora-user-images%5Cimage-20240510232940607.png&pos_id=img-BFpTa3aD-1723033400704)
![[Modbus] Modbus协议开发-基本概念（一）](https://i-blog.csdnimg.cn/direct/62093e7cf3ea4e75b920bb47a2937d0e.png)
