vue中$nextTick()做用

 

 

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