Vue中的$nextTick有什么作用?
在下次 DOM 更新循环结束之后,执行指定的回调函数。
简单来说,它的核心作用是 让你在修改数据之后,能够立即获取到更新后的 DOM。
| 场景 | 说明 |
|---|---|
| 操作依赖 DOM 的第三方库 | 比如初始化 Swiper、ECharts 图表,或调用 jQuery 插件时,必须保证挂载点 DOM 已经渲染完成。 |
| 获取更新后的 DOM 尺寸/位置 | 比如需要获取一个列表更新后的滚动高度,或者计算某个元素的 offsetTop。 |
| 在 created 钩子中操作 DOM | created 时 DOM 还未渲染,如果想在此处操作 DOM,必须放在 $nextTick 中(不过更推荐在 mounted 中做)。 |
| 组件数据更新后,想等待子组件渲染完成 | 父组件修改了传给子组件的 prop,若想立即操作子组件 DOM,需要在父组件的 $nextTick 中执行。 |
浙公网安备 33010602011771号