在 Vue 中,nextTick
是一个非常重要的异步工具函数,用于在 DOM 更新完成后执行回调逻辑。它常用于你想在 Vue 更新数据后立即操作最新的 DOM 元素时。
✅ 简单定义
或在 Vue 3 中(使用 Composition API):
📌 核心作用:等待 DOM 更新后再执行逻辑
Vue 的更新是异步的,当你修改了响应式数据后,DOM 并不会立即更新,而是在下一次“tick”中批量更新。这时候如果你立即操作 DOM,可能还是旧状态。
nextTick
的作用就是:
等待 Vue 把数据更新“渲染到 DOM”之后,再执行你的代码。
🧠 典型使用场景
1. 操作最新 DOM
如果你不加 nextTick
,马上访问 this.$refs.box.innerText
可能还是旧值 "Hello"
。
2. 刷新滚动条、获取元素尺寸
3. 与动画/过渡结合
当你需要在数据变动后触发动画,或者等待某个过渡 class 加入再操作,也可以使用 nextTick
。
🆚 为什么不能立即获取 DOM?
Vue 出于性能考虑,会将多次响应式数据更新**“合并”**后统一渲染。这就导致你在修改数据后,DOM 并不会同步反映。
举例:
加上 nextTick
就能保证等 DOM 更新完:
✅ Vue 3 中的写法
如果你用的是 Composition API:
也可以用 Promise 风格:
🧾 总结
项目 | 内容 |
---|---|
名称 | nextTick |
本质 | 等待 Vue 渲染完 DOM 后执行回调 |
适用场景 | 操作 DOM、获取尺寸、滚动、动画控制等 |
语法 | Vue.nextTick(cb) (Vue 2)或 await nextTick() (Vue 3) |