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

异步更新队列

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

 1 <div id="demo">
 2  <input v-model='message' />
 3 </div>
 4 <script>
 5   var vm = new Vue({
 6    el: '#demo',
 7    data: {
 8     message: '123'
 9    },
10    watch: {
11     "message": function(text) {
12        console.log(this.$el.textContent) // => '没有更新'
13        this.$nextTick(function () {
14          console.log(this.$el.textContent) // => '更新完成'
15        })
16       }
17    }
18   })
19 </script>

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