概念

結(jié)論：
Vue 在更新 DOM 時是異步執(zhí)行的

流程：
1.只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更
2.如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。
性能優(yōu)化，這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的
3.在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。

異步事件更新2

（↑ 自己理解的數(shù)據(jù)更新意思）

Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，
如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替。

異步隊列操作的語法

MutationObserver
setImmediate

語法解釋

在工作中意義何在？ 【獲取更新后的 DOM 狀態(tài)】

多數(shù)情況我們不需要關心這個過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點什么，這就可能會有些棘手。
雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。

通過Vue全局方法和實例方法，我們可以獲取到更新后的時間節(jié)點
入口函數(shù)中，可以使用全局方法：Vue.nextTick(fn)
單頁面組件中，可以使用實例方法：vm.$nextTick()

官方例：
全局方法

<div id="example">{{message}}</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // 更改數(shù)據(jù)
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
  vm.$el.textContent === 'new message' // true
})

實例方法

<div id="example">{{message}}</div>

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '未更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '已更新'
      console.log(this.$el.textContent) // => '未更新'
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => '已更新'
      })
    }
  }
})