Vue加載流程

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

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

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

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

什么是DIFF

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

其有兩個特點：

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

DIFF算法的過程：

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

• patchVnode做了以下操作：

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

• updateChildren主要做了以下操作：

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

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

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

• 渲染根節(jié)點：

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

• 渲染模板：

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

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

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

最新評論