异步更新队列
当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元素更新后理解调用。