vue的nextTick是下一次事件循环吗

老马的编程笔记

已于 2024-08-02 23:53:59 修改

阅读量680

点赞数 6

分类专栏： Vue3 文章标签： Vue nextTick 异步更新队列响应式原理事件循环

于 2024-08-02 23:42:04 首次发布

本文链接：https://blog.csdn.net/qq_23365135/article/details/140882039

版权

Vue3 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

如题，nextTick的回调是在下一次事件循环被执行的吗？

是不是下一次事件循环取决于nextTick的实现，如果是用的微任务，那么就是本次事件循环；否则如果用的是宏任务，那么就是下一次事件循环。

我们看下Vue3中nextTick的源码：

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，所以妥妥的微任务，所以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>