1.什么是vue虛擬dom秽誊。先知道什么是dom樹(shù)鲸沮。
眾所周知，一個(gè)頁(yè)面形成的流程锅论。（順便聊一下回流和重繪）
（1） 解析 HTML===>生成DOM樹(shù)
（2） 解析CSS===>生成CSSDOM樹(shù)
（3） Render Tree ===> 從Dom樹(shù)的根節(jié)點(diǎn)開(kāi)始遍歷每個(gè)可見(jiàn)的節(jié)點(diǎn)（因?yàn)檫@里面有display：none讼溺、scrpi等的，不被遍歷最易。）
對(duì)于每個(gè)可見(jiàn)的節(jié)點(diǎn)怒坯，找到其對(duì)應(yīng)的CSSDOM規(guī)則炫狱，并且應(yīng)用。
生成Render Tree 剔猿。
fine视译，問(wèn)題來(lái)了，什么是回流呢归敬？就是在生成render Tree 的時(shí)候酷含，有的CSS涉及到了HTML的尺寸（width/height）、布局改變汪茧、隱藏等第美。詳細(xì)的可以去搜一下怎么會(huì)造成回流。<h3>所有的頁(yè)面都至少會(huì)有一次回流陆爽，因?yàn)榈谝淮紊蓃ender tree一定會(huì)回流</h3>
Render Tree生成后什往，layout（布局）就完成了開(kāi)始繪制（添加屬性，類(lèi)似于顏色啊慌闭，大小啊之類(lèi)的不會(huì)影響布局的屬性）别威。如果說(shuō)不出意外你不去改的話這輩子和個(gè)Render Tree就永遠(yuǎn)是這個(gè)樹(shù)了。HTML頁(yè)面就渲染結(jié)束了驴剔。
但是如果你想改省古。好嘛，我們就要開(kāi)始判斷你改的是什么了丧失。如果說(shuō)是影響布局的豺妓，那就是回流===>重繪
如果說(shuō)你只想改個(gè)顏色啥的那就直接是重繪，沒(méi)有回流布讹。
<h3>杰倫：回流必然會(huì)帶來(lái)重繪琳拭，但是重繪不一定會(huì)回流</h3>
關(guān)于如何優(yōu)化，可以搜索回流和重繪
參考圖：
好了描验，簡(jiǎn)單的理解了一些html解析和dom樹(shù)的生成流程白嘁。就可以解釋什么是虛擬dom了。
虛擬dom也還是那個(gè)dom膘流。那為啥不用真實(shí)的dom呢絮缅？因?yàn)檎鎸?shí)的DOM你一操作，它立馬給你回流重繪呼股，可能你有10個(gè)事件在等著干耕魄，一個(gè)個(gè)都要回流重繪一遍太影響性能了。
（高光打過(guò)來(lái)Ｅ硭）虛擬dom就站出來(lái)了吸奴。
虛擬dom：如果有10次更新dom的動(dòng)作，虛擬dom不會(huì)立即操作dom，而是將這10次更新的內(nèi)容儲(chǔ)存起來(lái)奄抽，通過(guò)diff算法蔼两，把新的dom（vue剛構(gòu)造的虛擬dom）和舊的dom（可能是頁(yè)面上現(xiàn)在顯示的真實(shí)的dom）進(jìn)行對(duì)比。然后渲染對(duì)比完的DOM逞度。
問(wèn)題來(lái)了：什么是diff呢额划？這是一個(gè)算法，有興趣的可以自己搜一下詳細(xì)了解誒档泽。我這里只是簡(jiǎn)單的介紹說(shuō)這個(gè)東西就是 ：頭頭對(duì)比俊戳。肚子肚子對(duì)比。腳腳對(duì)比馆匿。同級(jí)對(duì)比抑胎，不會(huì)跨級(jí)對(duì)比。就是我的新頭和我的舊頭對(duì)比渐北。我的新肚子和我的舊肚子對(duì)比阿逃。對(duì)比完了去頁(yè)面上生成一個(gè)新的我。
總結(jié)一下：服務(wù)器返回HTML文本===>瀏覽器解析===>VUE構(gòu)建虛擬DOM（beforeMount生命周期之前生成赃蛛，在beforeMount執(zhí)行renderh函數(shù)恃锉，生成template模板）===>數(shù)據(jù)更新，生成新的虛擬dom呕臂，使用diff算法對(duì)比兩個(gè)虛擬dom的區(qū)別在patch的階段發(fā)生變化的dom節(jié)點(diǎn)進(jìn)行個(gè)更新破托。
上面提到了patch階段，順便說(shuō)一下key diff算法會(huì)通過(guò)key可以判斷這兩個(gè)虛擬dom是不是同一個(gè)dom歧蒋，所以我們key盡量都要寫(xiě)上土砂，并且盡量不要使用索引作為key∶涨ⅲ可以使用 'xx-index' 方式寫(xiě)key萝映。方便你我它~~
好了。本文over以上都是自己復(fù)習(xí)的時(shí)候總結(jié)的內(nèi)容褥琐，如果有問(wèn)題請(qǐng)留言Thanks?(?ω?)?
