Vue中$nextTick的简单理解

319 阅读1分钟

vue nextTick使用

Vue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新,Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM,简而言之就是可以拿到更新后的DOM,而是原来的。以下的三张图片可以更直观地理解。

代码结构

image.png

未点击button之前

image.png

点击button之后(很显然只有第二种可以拿到新的结果

image.png