Vue.nextTick原理及使用场景

Posted by Song on March 20, 2019

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();
		})
	}
})