vue中的$nextTick()


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()的回調函數中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM