vue中的$nextTick

97 阅读1分钟

背景: 1、简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

定义: 2、在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。nextTick(),是将回调函数延迟在下一次dom更新数据后调用,简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数。

原理 3、vue用异步队列的方式来控制DOM更新和nextTick回调先后执行。 简单来说,nextTick是做了promise加上setTimeout的封装,利用事件换行机制,来确保当nextTick出现时,都是在我们所有操作DOM更新之后的。

场景: 4.1 点击获取元素宽度 4.2 使用swiper插件通过 ajax 请求图片后的滑动问题 4.3 点击按钮显示原本以 v-show = false 隐藏起来的输入框,并获取焦点