this.$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()

 


免責聲明!

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



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