虛擬DOM：將真實DOM樹上的結(jié)構(gòu)、屬性信息等用JavaScript 對象的形式來表示
栗子：
HTML寫法：

<ul id='list'>
  <li class='item'>Item 1</li>
  <li class='item'>Item 2</li>
  <li class='item'>Item 3</li>
</ul>

對應(yīng)JavaScript 對象表示

var element = {
  tagName: 'ul', // 節(jié)點標(biāo)簽名
  props: { // DOM的屬性，用一個對象存儲鍵值對
    id: 'list'
  },
  children: [ // 該節(jié)點的子節(jié)點
    {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
    {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
  ]
}

Virtual DOM 算法：當(dāng)狀態(tài)變更時，比較兩棵新舊虛擬DOM樹的差異（核心部分：diff算法)，將找出的差異部分進(jìn)行DOM操作

簡單總結(jié)：

1、構(gòu)建虛擬DOM

2、通過虛擬DOM構(gòu)建真實DOM

3、生成新的虛擬DOM

4、diff算法比較兩顆虛擬DOM的差異

1）只會對同一個層級的元素進(jìn)行對比
2）深度優(yōu)先遍歷，記錄差異
3）差異類型
可能出現(xiàn)的DOM操作：節(jié)點替換、刪除、新增、修改、更改列表順序等
因為節(jié)點是可重復(fù)的，所以需要給子節(jié)點加上唯一標(biāo)識key，列表對比的時候，使用key進(jìn)行對比，這樣才能復(fù)用老的 DOM 樹上的節(jié)點，記錄下每個節(jié)點的差異

5、真實DOM上只應(yīng)用變更記錄下來的差異部分即可

來自：https://github.com/livoras/blog/issues/13