Vue中的$nextTick有什么作用?

在下次 DOM 更新循环结束之后,执行指定的回调函数。
简单来说,它的核心作用是 让你在修改数据之后,能够立即获取到更新后的 DOM。

场景 说明
操作依赖 DOM 的第三方库 比如初始化 Swiper、ECharts 图表,或调用 jQuery 插件时,必须保证挂载点 DOM 已经渲染完成。
获取更新后的 DOM 尺寸/位置 比如需要获取一个列表更新后的滚动高度,或者计算某个元素的 offsetTop。
在 created 钩子中操作 DOM created 时 DOM 还未渲染,如果想在此处操作 DOM,必须放在 $nextTick 中(不过更推荐在 mounted 中做)。
组件数据更新后,想等待子组件渲染完成 父组件修改了传给子组件的 prop,若想立即操作子组件 DOM,需要在父组件的 $nextTick 中执行。
posted @ 2026-07-21 08:37  小肥123  阅读(4)  评论(0)    收藏  举报