Vue加載流程

1.初始化的第一階段是Vue實(shí)例也就是vm對(duì)象創(chuàng)建前后：首先Vue進(jìn)行生命周期，事件初始化發(fā)生在beforeCreate生命周期函數(shù)前，然后進(jìn)行數(shù)據(jù)監(jiān)測(cè)和數(shù)據(jù)代理的初始化，也就是創(chuàng)建vm對(duì)象的過(guò)程，當(dāng)vm對(duì)象創(chuàng)建完成就可以通過(guò)vm對(duì)象訪問(wèn)到劫持的數(shù)據(jù)，比如data中的數(shù)據(jù)，methods中的方法等。然后Vue調(diào)用內(nèi)部的render函數(shù)開始解析模板將其解析為一個(gè)JS對(duì)象也即在內(nèi)存中生成虛擬DOM也就是Vnode對(duì)象。第二階段是vm對(duì)象掛載前后：掛載完成前頁(yè)面呈現(xiàn)的是未經(jīng)過(guò)Vue編譯的DOM結(jié)構(gòu)，所有對(duì)DOM的操作最終都不會(huì)生效。掛載前首先將內(nèi)存中的Vnode轉(zhuǎn)換為真實(shí)DOM插入頁(yè)面，此時(shí)完成掛載。頁(yè)面中呈現(xiàn)的就是經(jīng)過(guò)Vue編譯的DOM結(jié)構(gòu)，至此初始化過(guò)程結(jié)束。

2.開啟訂閱消息也就是數(shù)據(jù)劫持代理監(jiān)聽，其實(shí)就是寫了一個(gè)watcher函數(shù)去監(jiān)聽數(shù)據(jù)的改變，發(fā)送網(wǎng)絡(luò)請(qǐng)求，綁定自定義事件等初始化操作。當(dāng)數(shù)據(jù)發(fā)生變化以后即狀態(tài)變更的時(shí)候，會(huì)重新構(gòu)造新的Vnode對(duì)象。然后用新的Vnode對(duì)象和舊的Vnode對(duì)象進(jìn)行差異比較也就是DIFF算法，然后把差異應(yīng)用到舊的Vnode對(duì)象所構(gòu)建的真正的DOM樹上這個(gè)過(guò)程就是patch，視圖就更新了

每一個(gè)組件在加載時(shí)都會(huì)調(diào)用Vue內(nèi)部的render函數(shù)把該組件的tamplate選項(xiàng)的模板解析為一個(gè)JS對(duì)象，這個(gè)對(duì)象和DOM節(jié)點(diǎn)對(duì)象結(jié)構(gòu)一樣，然后是數(shù)據(jù)劫持代理監(jiān)聽，當(dāng)數(shù)據(jù)發(fā)生變化以后，將舊Vnode對(duì)象和生成的新Vnode對(duì)象比較差異然后更新DOM

Vnode: {
tag:"", 
id:, 
name:"Box", 
$el:真實(shí)頁(yè)面上的DOM的引用, 
//等等屬性 
chiren:[ 
{ tag:"", 
id:, 
name:"Box2",
$el:真實(shí)頁(yè)面上的DOM的引用, 
//等等屬性 }, 
{ 
tag:"", 
id:, 
name:"Box3",
$el:真實(shí)頁(yè)面上的DOM的引用,
//等等屬性 }
] }

什么是DIFF

diff算法是一種對(duì)比算法。對(duì)比兩者是舊虛擬DOM和新虛擬DOM，對(duì)比出是哪個(gè)虛擬節(jié)點(diǎn)更改了，找出這個(gè)虛擬節(jié)點(diǎn)，并只更新這個(gè)虛擬節(jié)點(diǎn)所對(duì)應(yīng)的真實(shí)節(jié)點(diǎn)，而不用更新其他數(shù)據(jù)沒(méi)發(fā)生改變的節(jié)點(diǎn)，實(shí)現(xiàn)精準(zhǔn)地更新真實(shí)DOM，進(jìn)而提高效率

其有兩個(gè)特點(diǎn)：

• 比較只會(huì)在同層級(jí)進(jìn)行, 不會(huì)跨層級(jí)比較
• 在diff比較的過(guò)程中，循環(huán)從兩邊向中間比較

DIFF算法的過(guò)程：

• 當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，訂閱者watcher就會(huì)調(diào)用patch給真實(shí)的DOM打補(bǔ)丁
• 通過(guò)isSameVnode進(jìn)行判斷，相同則調(diào)用patchVnode方法

• patchVnode做了以下操作：

  • 找到對(duì)應(yīng)的真實(shí)dom，稱為el
  • 如果都有都有文本節(jié)點(diǎn)且不相等，將el文本節(jié)點(diǎn)設(shè)置為Vnode的文本節(jié)點(diǎn)
  • 如果oldVnode有子節(jié)點(diǎn)而VNode沒(méi)有，則刪除el子節(jié)點(diǎn)
  • 如果oldVnode沒(méi)有子節(jié)點(diǎn)而VNode有，則將VNode的子節(jié)點(diǎn)真實(shí)化后添加到el
  • 如果兩者都有子節(jié)點(diǎn)，則執(zhí)行updateChildren函數(shù)比較子節(jié)點(diǎn)

• updateChildren主要做了以下操作：

  • 設(shè)置新舊VNode的頭尾指針
  • 新舊頭尾指針進(jìn)行比較，循環(huán)向中間靠攏，根據(jù)情況調(diào)用patchVnode進(jìn)行patch重復(fù)流程、調(diào)用createElem創(chuàng)建一個(gè)新節(jié)點(diǎn)，從哈希表尋找 key一致的VNode 節(jié)點(diǎn)再分情況操作

參考 前端進(jìn)階面試題詳細(xì)解答

關(guān)于Vue中el，template，render，$mount的渲染

• 渲染根節(jié)點(diǎn)：

  • 先判斷有無(wú)el屬性，有的話直接獲取el根節(jié)點(diǎn)，沒(méi)有的話調(diào)用$mount去獲取根節(jié)點(diǎn)。

• 渲染模板：

  • 有render：這時(shí)候優(yōu)先執(zhí)行render函數(shù)，render優(yōu)先級(jí) > template。
  • 無(wú)render：有template時(shí)拿template去解析成render函數(shù)的所需的格式，并使用調(diào)用render函數(shù)渲染。無(wú)template時(shí)拿el根節(jié)點(diǎn)的outerHTML去解析成render函數(shù)的所需的格式，并使用調(diào)用render函數(shù)渲染

渲染的方式：無(wú)論什么情況，最后都統(tǒng)一是要使用render函數(shù)渲染

以上就是vue面試之new Vue的時(shí)候到底做了什么的詳細(xì)內(nèi)容，更多關(guān)于vue面試new vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論