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元素更新后理解调用。