當你氣勢洶洶地使用Vue大展宏圖的時候,突然發(fā)現(xiàn),咦春感,我明明對這個數(shù)據(jù)進行更改了慎冤,但是當我獲取它的時候怎么是上一次的值(本人比較懶疼燥,就不具體舉例了)
此時,Vue就會說:“小樣蚁堤,這你就不懂了吧醉者,我的DOM是異步更新的呀!E撬即!”
簡單的說,Vue的響應式并不是只數(shù)據(jù)發(fā)生變化之后呈队,DOM就立刻發(fā)生變化剥槐,而是按照一定的策略進行DOM的更新。這樣的好處是可以避免一些對DOM不必要的操作宪摧,提高渲染性能粒竖。
在Vue官方文檔中是這樣說明的:可能你還沒有注意到,Vue異步執(zhí)行DOM更新几于。只要觀察到數(shù)據(jù)變化蕊苗,Vue將開啟一個隊列,并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變孩革。如果同一個watcher被多次觸發(fā)岁歉,只會被推入到隊列中一次。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和DOM操作上非常重要。然后锅移,在下一個的事件循環(huán)“tick”中熔掺,Vue刷新隊列并執(zhí)行實際 (已去重的) 工作。
白話一點就是說非剃,其實這是和JS當中的事件循環(huán)是息息相關的置逻,就是Vue不可能對每一個數(shù)據(jù)變化都做一次渲染,它會把這些變化先放在一個異步的隊列當中备绽,同時它還會對這個隊列里面的操作進行去重券坞,比如你修改了這個數(shù)據(jù)三次,它只會保留最后一次肺素。這些變化是都可以通過隊列的形式保存起來恨锚,那現(xiàn)在的問題就來到了,那vue是在事件循環(huán)的哪個時機來對DOM進行修改呢倍靡?
Vue有兩種選擇猴伶,一個是在本次事件循環(huán)的最后進行一次DOM更新,另一種是把DOM更新放在下一輪的事件循環(huán)當中塌西。z這時他挎,尤雨溪拍了拍胸脯說:“這兩種方法,我都有!” 但是因為本輪事件循環(huán)最后執(zhí)行會比放在下一輪事件循環(huán)要快很多捡需,所以Vue優(yōu)先選擇第一種办桨,只有當環(huán)境不支持的時候才觸發(fā)第二種機制。(開頭的鏈接讓你懂事件循環(huán))
雖然性能上提高了很多站辉,但這個時候問題就出現(xiàn)了呢撞,我們都知道在一輪事件循環(huán)中,同步執(zhí)行棧中代碼執(zhí)行完成之后庵寞,才會執(zhí)行異步隊列當中的內(nèi)容狸相,那我們獲取DOM的操作是一個同步的呀!捐川!那豈不是雖然我已經(jīng)把數(shù)據(jù)改掉了脓鹃,但是它的更新異步的,而我在獲取的時候古沥,它還沒有來得及改瘸右,所以會出現(xiàn)文章開頭的那個問題。