概念
結(jié)論：
Vue 在更新 DOM 時(shí)是異步執(zhí)行的
流程：
1.只要偵聽(tīng)到數(shù)據(jù)變化挎扰，Vue 將開(kāi)啟一個(gè)隊(duì)列夹界，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更
2.如果同一個(gè) watcher 被多次觸發(fā)显晶，只會(huì)被推入到隊(duì)列中一次振惰。
性能優(yōu)化，這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的
3.在下一個(gè)的事件循環(huán)“tick”中，Vue 刷新隊(duì)列并執(zhí)行實(shí)際 (已去重的) 工作。
（↑ 自己理解的數(shù)據(jù)更新意思）
Vue 在內(nèi)部對(duì)異步隊(duì)列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate稠腊，
如果執(zhí)行環(huán)境不支持，則會(huì)采用 setTimeout(fn, 0) 代替鸣哀。
異步隊(duì)列操作的語(yǔ)法
MutationObserver
setImmediate
在工作中意義何在架忌？ 【獲取更新后的 DOM 狀態(tài)】
多數(shù)情況我們不需要關(guān)心這個(gè)過(guò)程，但是如果你想基于更新后的 DOM 狀態(tài)來(lái)做點(diǎn)什么我衬，這就可能會(huì)有些棘手叹放。
雖然 Vue.js 通常鼓勵(lì)開(kāi)發(fā)人員使用“數(shù)據(jù)驅(qū)動(dòng)”的方式思考，避免直接接觸 DOM挠羔，但是有時(shí)我們必須要這么做井仰。
通過(guò)Vue全局方法和實(shí)例方法，我們可以獲取到更新后的時(shí)間節(jié)點(diǎn)
入口函數(shù)中破加，可以使用全局方法：Vue.nextTick(fn)
單頁(yè)面組件中俱恶，可以使用實(shí)例方法：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
})
實(shí)例方法
<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) // => '已更新'
})
}
}
})
