虛擬dom

vue和react都有用到虛擬dom。虛擬dom有什麼用？先來看下dom元素，dom是很慢的，咱們能夠把dom元素裏面的全部屬性都打印出來看下

能夠看到，一個元素就有幾百個屬性，這還僅僅是一個而已，真正的dom結構是很是龐大的，由於他們就是這麼規定的，因此操做dom時要當心再當心，有時候操做不當可能就會成爲殺死性能的罪魁禍首。這也是爲何咱們常常說操做dom耗性能，不要常常操做dom結構的緣由。

相對於dom結構，用js對象結構處理是很是快的，dom樹上的結構，屬性，子節點都是能夠經過js表示的。

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

既然能夠用js對象結構來表示dom樹，那麼就能夠根據js對象結構來構建一個dom樹。

下面來簡單說一下虛擬dom的實現原理

1.用js對象結構構建一個虛擬dom

2.根據虛擬dom生成真實的dom

3.dom上有狀態變化的時候，生成一個新的虛擬dom

4.比較兩個虛擬dom的差別

5.把差別應用到真正的dom上

做者：戴嘉華
連接：https://www.zhihu.com/question/29504639/answer/73607810
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

// 1. 構建虛擬DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])

// 2. 經過虛擬DOM構建真正的DOM
var root = tree.render()
document.body.appendChild(root)

// 3. 生成新的虛擬DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])

// 4. 比較兩棵虛擬DOM樹的不一樣
var patches = diff(tree, newTree)

// 5. 在真正的DOM元素上應用變動
patch(root, patches)