$nextTick和setTimeout有什么区别?

zaven
  • 27

①$nextTick和setTimeout有什么区别?

②在实际项目中使用两者哪个会好点?没有优缺点之类的,需要注意什么

在实际项目中遇到元素还没渲染出来就执行了事件,甚至是有些接口先调用了
除了这种延时调用的方法还有更好的解决方案嘛

大神们求解

回复
阅读 2.4k
4 个回答
✓ 已被采纳

nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

简单点说就是DOM更新后会执行的一个回调方法

setTimeout:只是延迟执行,在延迟执行的方法里,DOM有可能会更新也有可能没有更新。
常规做法就是延迟500ms或者1s

建议使用nextTick在有涉及DOM更新的场景

nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是PromisesetTimeout的区别,本质是Event Loop中微任务与宏任务的区别。建议题主系统地去学习下这方面的知识。

nextTick优先使用微任务,当浏览器均不支持时使用setTimeout实现。没有绝对说哪个更好,但通常nextTick就可以,setTimeout更多是在明确需要定时器的情况下使用。至于你说的元素没渲染先执行事件最好贴下具体代码,大概率是你调用的时机不对

Rick
  • 2
新手上路,请多包涵

两者使用的情况不同,建议题主可以研究一下官方文档。
$nextTick:一般使用在DOM操作上的,Vue在更新data之后并不会立即更新DOM上的数据,就是说**如果我们修改了data中的数据,再马上获取DOM上的值,我们取得的是旧值**。官网的原话是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。我们把获取DOM上值的操作放进$nextTick里,就可以得到更新后得数据。

setTimeout:就是个延时回调,和DOM操作无关。

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

宣传栏