vue更新數據是異步的

1.0 中確實是通過 v-el:xxx 標記 dom 然後在組件裏通過 this.$els.xxx 就可以獲得這個 dom 對象了

$nextTick(() => {}) 與DOM相關操作寫在該函數回調中，確保DOM已渲染

什麽是Vue.nextTick()

官方文檔解釋如下：

在下次 DOM 更新循環結束之後執行延遲回調。在修改數據之後立即使用這個方法，獲取更新後的 DOM。

所以就衍生出了這個獲取更新後的DOM的Vue方法。所以放在Vue.nextTick()回調函數中的執行的應該是會對DOM進行操作的 js代碼，

什麽時候需要用的Vue.nextTick()

你在Vue生命周期的created()鉤子函數進行的DOM操作一定要放在Vue.nextTick()的回調函數中。原因是什麽呢，原因是在created()鉤子函數執行的時候DOM 其實並未進行任何渲染，而此時進行DOM操作無異於徒勞，所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mounted鉤子函數，因為該鉤子函數執行時所有的DOM掛載已完成。使用時機：el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子函數，此時頁面並未全部渲染。

在某個動作有可能改變DOM元素結構的時候，對DOM一系列的js操作都要放進Vue.nextTick()

轉載於:https://blog.csdn.net/shuidinaozhongyan/article/details/72630573

vue中$nextTick()作用