vm.$nextTick()


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'
})



更詳細參考這裏:深入響應式原理#異步更新隊列
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章