vue异步刷新队列（概述）

vue异步刷新队列

vue在更新dom的时候是异步的，这样是为了性能考虑，因为对于浏览器来说，最耗时的操作就是dom渲染，vue只要监测到数据发生了变化，就会开启一个事务，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次，当事务结束时，就执行最后一次添加进队列的任务。
也就是说，当你在vue中更改了数据，vue并不一定会立即出发试图更新，比如：

new Vue({
	el: "#app",
	data() {
		return {
			count: 0
		}
	},
	methods:{
		addCount() {
			this.count++;
			this.count++;
			this.count++;
			this.count++;
			this.count++;
		}
	}
})

在这个示例例中，当addCount被触发的时候，执行了5次this.count++，是不是页面也会更新五次呢？答案是否定的，因为在addCount方法被调用是，vue会开一一个异步任务并且生成一个异步更新队列，this.count++每次调用都是在异步更新队列里面更新一下需要更新的dom元素的需要更新的count值，直到addCount方法执行完，异步任务结束，然后vue只会在异步更新队列里面找到最后一次更新的值，然后去渲染dom，这就是vue的异步更新队列，这为vue性能的提升提供了很大而帮助。
那怎么去验证呢？
vue在视图更新后会触发updated钩子函数，因此我们可以在这个生命周期钩子中打印输出，看一下addCount调用后updated里面是打印了一次还是五次即可证明:

new Vue({
	el: "#app",
	data() {
		return {
			count: 0
		}
	},
	methods:{
		addCount() {
			this.count++;
			this.count++;
			this.count++;
			this.count++;
			this.count++;
		}
	},
	updated() {
		console.log("updated")
	}
})

最终会发现，调用addCount方法只会触发一个updated钩子函数，也就证明页面更新只触发了一次。