vue nextTick执行的时间

image.png
一个tick是不是指
宏任务,所有微任务,渲染这个流程,那为什么是下次dom,不应该是这次dom渲染之后,在下一个tick的微任务中获取了dom吗?百思不得琪姐
是不是这个“下次dom更新”就是指的是 这次tick中的dom更新?
image.png

阅读 3.8k
4 个回答

nextTick理解成Promise.then就行了。
它文档上说的没错,确实是下一次,因为dom更新是异步的,你的这段代码里先执行nextTick,再进行dom更新,再执行nextTick回调。

你先记住,nextTick 是一个微任务

接下来思考 dom 如何更新?
dom 自己会更新吗?显然不会,需要代码操作,那么这里 dom 更新是指 vue 内部把虚拟 DOM 转换成真实 DOM
这里你可以想象成 Vue 逻辑都是同步的,想要在同步之后执行,最早的就是微任务(宏任务也可以,但是有可能会导致闪烁)了。

看下event loop事件循坏机制

不要过多纠结是这次还是下次,记住是DOM更新后执行就对了
(1)this.isShow = true这行代码,最终也是执行nextTick函数,此时传入nextTick函数的回调函数,就是用来更新页面的函数。
(2)this.$nextTick(() => {})这行代码的回调函数,会和上行代码传入nextTick的回调函数,最终都会被放进一个callbacks数组中,异步执行。
(3)而第一行代码的回调会优先执行,然后再执行this.$nextTick(()=>{})这个回调,此时页面已经更新了,所以可以获取到最新的DOM

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题