$nextTick 的作用


文檔:深入響應式原理

Vue 實現響應式並不是數據發生變化之后 DOM 立即變化,而是按一定的策略進行 DOM 的更新。

$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調,在修改數據之后使用 $nextTick,則可以在回調中獲取更新后的 DOM。

 

例子:

初始化數據:

定義方法:

頁面效果:

然后我們現在試着點擊觸發修改:

 

 可以看到,msg已經變成了Hello world,在changeMsg()方法中,先修改msg的值成為‘Hello world’,然后通過拿到dom的值再依次修改msg1、msg2、msg3的值,此時修改得到的msg1依然是‘hello vue’,this.$nextTick中修改得到的msg2則是‘hello world’,msg3依然是‘hello vue’,也就是說,在changeMsg()方法觸發后,修改了msg的值,但是此時再通過dom取到的值還未改變,所以可以知道:

 

 vue響應式的改變一個值以后,此時的dom並不會立即更新,如果需要在數據改變以后立即通過dom做一些操作,可以使用$nextTick獲得更新后的dom。

 

希望本文對你有所幫助!

 


免責聲明!

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



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