文檔:深入響應式原理
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。
希望本文對你有所幫助!