Vue加載流程

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

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

每一個組件在加載時都會調用Vue內部的render函數把該組件的tamplate選項的模板解析為一個JS對象，這個對象和DOM節(jié)點對象結構一樣，然后是數據劫持代理監(jiān)聽，當數據發(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é)點所對應的真實節(jié)點，而不用更新其他數據沒發(fā)生改變的節(jié)點，實現精準地更新真實DOM，進而提高效率

其有兩個特點：

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

DIFF算法的過程：

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

• patchVnode做了以下操作：

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

• updateChildren主要做了以下操作：

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

參考 前端進階面試題詳細解答

關于Vue中el，template，render，$mount的渲染

• 渲染根節(jié)點：

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

• 渲染模板：

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

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

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

最新評論