Vue中DOM更新機制

當你氣勢洶洶地使用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)文章開頭的那個問題。

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末岩齿,一起剝皮案震驚了整個濱河市太颤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌盹沈,老刑警劉巖龄章,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡做裙,警方通過查閱死者的電腦和手機岗憋,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來锚贱,“玉大人仔戈,你說我怎么就攤上這事∨±龋” “怎么了监徘?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長吧碾。 經(jīng)常有香客問我凰盔,道長,這世上最難降的妖魔是什么倦春? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任廊蜒,我火速辦了婚禮,結果婚禮上溅漾,老公的妹妹穿的比我還像新娘。我一直安慰自己著榴,他們只是感情好添履,可當我...
    茶點故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著脑又,像睡著了一般暮胧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上问麸,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天往衷,我揣著相機與錄音,去河邊找鬼严卖。 笑死席舍,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的哮笆。 我是一名探鬼主播来颤,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼稠肘!你這毒婦竟也來了福铅?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤项阴,失蹤者是張志新(化名)和其女友劉穎滑黔,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡略荡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年庵佣,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片撞芍。...
    茶點故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡秧了,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出序无,到底是詐尸還是另有隱情验毡,我是刑警寧澤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布帝嗡,位于F島的核電站晶通,受9級特大地震影響,放射性物質發(fā)生泄漏哟玷。R本人自食惡果不足惜狮辽,卻給世界環(huán)境...
    茶點故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望巢寡。 院中可真熱鬧喉脖,春花似錦、人聲如沸抑月。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谦絮。三九已至题诵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間层皱,已是汗流浹背性锭。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留叫胖,地道東北人草冈。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像瓮增,于是被迫代替她去往敵國和親疲陕。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容