$nextTick

Vue的nextTick：DOM更新与异步队列

最新推荐文章于 2025-10-11 22:42:15 发布

原创最新推荐文章于 2025-10-11 22:42:15 发布 · 199 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

nextTick是Vue中用于在DOM更新后执行回调的方法，适用于数据变化后的DOM操作或在created钩子中获取DOM。Vue采用异步更新策略，数据变更不会立即反映到DOM，而是批量更新。因此，在需要依赖最新DOM状态时，如计算元素高度或响应式数据变化后的操作，应使用nextTick。

说说nextTick吧

nextTick：在下次DOM更新循环结束之后执行延迟回调。

1.nextTick是做什么的?

nextTick是等待下一次DOM更新刷新的工具方法。（其实一句话就可以把$nextTick这个东西讲明白：就是你放在 $ nextTick 当中的操作不会立即执行，而是等数据更新、DOM更新完成之后再执行，这样我们拿到的肯定就是最新的了。
再准确一点来讲就是 $nextTick方法将回调延迟到下次DOM更新循环之后执行。

2.为什么需要它呢?

Vue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使用nextTick。

3.开发时何时使用它?抓抓头，想想你在平时开发中使用它的地方

开发时，有两个场景我们会用到nextTick
- created中想要获取DOM时;
- 响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度。

在项目中什么时候用呢?

比如，当我们需要在生命周期的created()函数进行一些DOM操作的时候一定、要把相关代码放在Vue.nextTick()的回调函数中。原因:在created钩子函数中，DOM还未进行任何渲染，此时进行DOM操作是没用的，所以如果要在这里操作dom,一定要将相关js代码放进
Vue.nextTick回调函数中。又或者，在数据变化后要执行某个动作，而这个动作需要使用随数据变化而改变的DOM结构的时候，也需要把相关逻辑写入Vue.nextTick ()回调函数中。