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