vue中$nextTick()作用
1、vue更新數據是異步的
1.0中確實是通過v-el:xxx標記dom然后在組件里通過this.$els.xxx就可以獲得這個dom對象了,$nextTick(() => {})與dom相關操作寫在該函數回調中,確保DOM已渲染。
2、什么是Vue.nextTick()
在下次DOM更新循環結束之后執行延遲回調,在修改數據之后立即使用這個方法,獲取更新后的DOM。所以就衍生出了這個獲取更新后的DOM的Vue方法。所以放在Vue.nextTick()回調函數中的執行的應該是會對DOM進行操作的js代碼。
3、什么時候需要用到Vue.nextTick()
你在Vue生命周期的created()鈎子函數進行的DOM操作一定要放在Vue.nextTick()回調函數中。原因是,在created()鈎子函數執行的時候DOM其實並未進行任何渲染,而此時進行DOM操作無異於徒勞,所以此處一定要將DOM操作的js代碼放進Vue.nextTick()的回調函數中。與之對應的就是mouted鈎子函數,因為該鈎子函數執行時所有的DOM掛載已完成。使用時機: el被新創建的vm.$el替換,並掛載到實例上去之后調用該鈎子函數,此時頁面並未全部渲染。
在某個動作有可能改變DOM元素結構的時候,對DOM一系列的js操作都要放進Vue.nextTick()的回調函數中。