Vue中的$nextTick是什么?原理是什么

427 阅读1分钟

背景:

1、简单来说,Vue 在修改数据后,视图不会⽴刻更新,⽽是等同⼀事件循环中的所有数据变化完成之后,再统⼀进⾏视图更新。Vue在更新DOM的时候,是异步执行的。只要监听到数据变化,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 隐藏起来的输⼊框,并获取焦点