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

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

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

我们看下Vue3中nextTick的源码:

js 复制代码
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结果呢?

这个问题真的困扰了我一段时间?

然后我做了个实验,实验代码如下:

html 复制代码
<!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是不是下一次事件循环没有关系,跟浏览器是不是已经渲染了没有关系。

相关推荐
爱看书的小沐8 小时前
【小沐学WebGIS】基于Three.JS绘制飞行轨迹Flight Tracker(Three.JS/ vue / react / WebGL)
javascript·vue·webgl·three.js·航班·航迹·飞行轨迹
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXS语法详解(10)
前端·javascript·学习·微信小程序·小程序·vue·团队开发
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,WXSS样式处理语法基础(9)
前端·javascript·vscode·学习·微信小程序·小程序·vue
sniper_fandc2 天前
Vue3双向数据绑定v-model
前端·vue
知识分享小能手3 天前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发
叫兽~~3 天前
vite vue 打包后运行,路由首页加载不出来
vue.js·vue
岁岁岁平安4 天前
SpringBoot3+WebSocket+Vue3+TypeScript实现简易在线聊天室(附完整源码参考)
java·spring boot·websocket·网络协议·typescript·vue
硅谷工具人5 天前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
whltaoin6 天前
Vue 与 React 深度对比:技术差异、选型建议与未来趋势
前端·前端框架·vue·react·技术选型
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(下)——知识点详解 + 案例实战(5)
前端·javascript·学习·微信小程序·小程序·vue·前端开发