$nextTick和setTimeout有什么区别？

Question

①$nextTick和setTimeout有什么区别？

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

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

大神们求解

Answer 1

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

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

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

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

Answer 2

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

Answer 3

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

Answer 4

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

setTimeout：就是个延时回调，和DOM操作无关。