背景:
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 隐藏起来的输⼊框,并获取焦点