vm.$nextTick
簡單說,因爲DOM至少會在當前tick裏面的代碼全部執行完畢再更新。所以不可能做到在修改數據後並且DOM更新後再執行,要保證在DOM更新以後再執行某一塊代碼,就必須把這塊代碼放到下一次事件循環裏面,比如setTimeout(fn, 0),這樣DOM更新後,就會立即執行這塊代碼。
//改變數據
vm.message = 'changed'
//想要立即使用更新後的DOM。這樣不行,因爲設置message後DOM還沒有更新
console.log(vm.$el.textContent) // 並不會得到'changed'
//這樣可以,nextTick裏面的代碼會在DOM更新後執行
Vue.nextTick(function(){
console.log(vm.$el.textContent) //可以得到'changed'
})
更詳細參考這裏:深入響應式原理#異步更新隊列