Vue 在更新 DOM 時是異步執(zhí)行的。只要偵聽到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)變更。如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。這種在緩沖時去除重復(fù)數(shù)據(jù)對于避免不必要的計算和 DOM 操作是非常重要的。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。Vue 在內(nèi)部對異步隊列嘗試使用原生的 Promise.then、MutationObserver 和 setImmediate，如果執(zhí)行環(huán)境不支持，則會采用 setTimeout(fn, 0) 代替。

例如，當(dāng)你設(shè)置 vm.someData = 'new value'，該組件不會立即重新渲染。當(dāng)刷新隊列時，組件會在下一個事件循環(huán)“tick”中更新。多數(shù)情況我們不需要關(guān)心這個過程，但是如果你想基于更新后的 DOM 狀態(tài)來做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發(fā)人員使用“數(shù)據(jù)驅(qū)動”的方式思考，避免直接接觸 DOM，但是有時我們必須要這么做。為了在數(shù)據(jù)變化之后等待 Vue 完成更新 DOM，可以在數(shù)據(jù)變化之后立即使用 vm.$nextTick(callback)。這樣回調(diào)函數(shù)將在 DOM 更新完成后被調(diào)用，回調(diào)函數(shù)的 this 自動綁定到調(diào)用它的實例上。

vm.$nextTick() 用法

export default {
    data () {
        return {
            message: '未更新'
        }
    },
    methods: {
        updateMsg () {
            this.message = '已更新'
            console.log(this.$el.textContent) // '未更新'
            this.$nextTick(() => {
                console.log(this.$el.textContent) // '已更新'
            })
        }
    }
}

vm.$nextTick() 返回一個 Promise 對象，可以使用 Promise 語法糖 async/await

methods: {
    async updateMsg () {
        this.message = '已更新'
        console.log(this.$el.textContent) // '未更新'
        await this.$nextTick()
        console.log(this.$el.textContent) // '已更新'
    }
}

在頁面加載過程中，涉及到子組件之間相互影響的情況下，將被影響的組件放在vm.$nextTick() 的回調(diào)函數(shù)中。比如，一個組件的頁面渲染需要依據(jù)另一個組件的數(shù)據(jù)結(jié)果。

參考：Vue 官方文檔