Vue异步更新队列
Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际(已去重的)工作。
修改数据后,Vue不会立即更新DOM,等到同一事件循环中所有数据变化完成后,再统一执行更新DOM操作。
vm.$nextTick
将回调延迟到下次 DOM 更新循环(修改数据完成,执行DOM更新完成)之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick
一样,不同的是回调的 this
自动绑定到调用它的实例上。
使用场景 需要在视图更新之后,基于新的视图进行操作
使用 swiper 插件通过 ajax 请求图片后实例化Swiper
$.ajax({
...
success: function(data) {
_this.data = data;
//_this.initSwiper();//此时DOM未更新,无法拿到图片列表实例化
_this.$nextTick(function() {
//此时DOM已更新,图片已插入DOM,可以实例化
_this.initSwiper();
})
}
})