前言:

從上面的幾個篇章中我們介紹了從模板渲染到真實dom的全過程,現在我們來進行回顧一下:

template-------------------->AST---------------------------->渲染函數------------->vnode------------真實dom

在我們進行寫代碼的時候,會對里面的元素進行更新，刪除,增加。

如果去操作Dom的話會進行大量的操作,速度非常的緩慢,性能也不好。

但是去操作Js對象，在操作Dom，1000次才能解決問題,操作Js對象一次就可以了。

虛擬節點本身就是一個js對象。

在這里就涉及到了Diff算法。

在第一次進行渲染的時候

將頁面的所有節點掛載到頁面上去,對應的頁面也會有一套屬于自己的虛擬dom

當頁面進行更新的時候。

此時會產生一份新的虛擬DOM我們暫且稱他為Vnode，原本的頁面也會對應著一份oldVnode。

更新的時候,就不存在刪除某個節點和添加某個節點,只是做一個更新。

   

      
蘋果
      
橘子
      
香蕉
    

舉個例子。

view圖:

假設這是上述對象的一份vnode。

const  dom={
  type:'div'
  children:{
    type:"li",
    text:'蘋果'
    type:"li",
    text:'橘子'
    type:"li",
    text:'香蕉'
  }
 }

將香蕉改成西紅柿。這個時候如果去操作dom進行修改極其的繁瑣，只改一個節點還好，如果是100個,1000個 ，會造成性能不佳。

現在改西紅柿，產生一份新的Js對象。

const  dom={
  type:'div'
  children:{
    type:"li",
    text:'蘋果'
    type:"li",
    text:'橘子'
    type:"li",
    text:'西紅柿'
  }
 }

此時Vnode和newVnode 會進行對比，兩者肯定以新的Vnode作為最終要渲染到頁面上的Vnode。

當頁面進行添加的時候。

同樣也會產一份新的Vnode, 和上一份oldVnode進行比較,然后進行相應的添加,最終將Vnode渲染成真實的Dom

當頁面進行刪除的時候。

同樣也會產一份新的Vnode, 和上一份oldVnode進行比較,然后進行相應的刪除,最終將Vnode渲染成真實的Dom

Diff算法。

在我們使用V-for的時候我們會去使用V-for進行渲染。

代碼:

在索引為2的位置添加數字5。

1.在無key的情況下

view圖：

?

這顯然不是我們要的最理想的結果。

給key幫上id之后就會達到最佳渲染的狀態。

通過圖形可以判斷下方的渲染比上方少渲染了節點，提升了性能。