Vue异步更新队列

之前在项目中遇到一个坑，需要将一个带有v-if的页面元素重新渲染，从而在一个方法中将绑定的data属性值连续进行置false和置true的操作，希望通过这样的操作让页面元素重新渲染，但是操作失败。之后查找原因后将问题解决，为了加深印象特写此文章。

Vue的数据更新不是即时的，而是存在一个异步更新的队列，这个队列缓存所有在当前方法域内的数据变化，当相同watcher被监测到触发多次时，只会将最后一次变化存入队列中。

下面用一个例子来说明。页面点击一个按钮，调用changeVariable方法，方法内试图重复修改msg属性，同时监听msg属性是否有变化，控制台输出

data () {
	return {
		msg: 'show time'
	}
},
methods: {
	changeVariable () {
		this.msg = (new Date()).getTime().toString()
		this.msg = 'show time'
	}
},
watch: {
	msg (newValue) {
		console.log(newValue)
	}
}

Vue在该方法发现msg属性被修改了两次，只将第二次的监听结果放入了更新队列中，而在第二次的监听中，属性值并没有变化，所以watcher并没有发现值被改变，无控制台输出。
Vue提供等待数据变化的方法Vue.nextTick(callback)，当数据发生变化后，回调方法将被执行，下面我们在两次改变属性之间加上这个方法，方法中输出msg的值

data () {
  return {
    msg: 'show time'
  }
},
methods: {
  changeVariable () {
    this.msg = (new Date()).getTime().toString()
    this.$nextTick(function () {
      console.log(this.msg)
    })
    this.msg = 'show time'
  }
},
watch: {
  msg (newValue) {
    console.log(newValue)
  }
}

结果控制台输出了’show time’，这说明nextTick并没有第一时间输出msg的值（当前时间戳），而是在等待Vue发生下一次data变化时，才将msg的新值（‘show time’）输出，尽管其与改变前的值一样