沐鳴下載_簡單理解vue中的$nextTick

$nextTick

vue.nectTick() 是在下次DOM更新循環結束之後執行延遲回調,在修改數據之後使用$nextTick,則可以在回調中獲取更新后的DOM(dom的改變是發生在nextTick()之後),這個方法作用是當數據被修改后使用這個方法,會回調獲取更新后的dom再render出來

vue.nextTick()作用:在下次dom更新循環結束之後,執行延遲回調。在修改數據之後立即使用這個方法,獲得更新后的dom

 

在以下兩個情況下需要用到vue.nextTick()

1、vue聲明周期的created() 鈎子函數進行的DOM操作一定要放在vue.nextTick() 的回調函數中,因為created() 執行的時候DOM實際上並未進行任何渲染,此時進行DOM操作無異於徒勞,所以此處一定要將DOM操作的js代碼放進vue.nextTick()的回調函數中。

與之對應的就是mounted 鈎子函數,因為該函數執行時所有的DOM掛載和渲染都已完成,此時再鈎子函數中進行任何DOM操作都不會有問題。

2、在數據變化后要執行的某個操作,而這個操作需要使用隨數據改變而改變的DOM結構的時候,這個操作應該放進vue.nextTick() 的回調函數中

簡而言之,如果你在數據改變之後的操作跟改變之後的DOM有關,那麼就應該使用vue.nextTick()

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8582