vue进阶用法-深入响应式原理

异步更新队列

当vue异步执行更新DOM时，只要观察到数据变化，vue经开启一个队列，并缓冲在同一时间循环中发生的所有数据改变。如果同一个watch被多次触发，只会一次推入到队列中。然后在下一个事件循环中“tick”中，vue刷新队列并执行实际（已去重的）工作。

<div id="demo">
 <input v-model='message' />
</div>
<script>
  var vm = new Vue({
   el: '#demo',
   data: {
    message: '123'
   },
   watch: {
    "message": function(text) {
       console.log(this.$el.textContent) // => '没有更新'
       this.$nextTick(function () {
         console.log(this.$el.textContent) // => '更新完成'
       })
      }
   }
  })
</script>

当异步更新数据时，vm.$nextTick() 方法会在DOM元素更新后理解调用。