什么是虛擬DOM

簡單來說，虛擬dom就是一個最少包含tagName attr children 屬性的js對象，是一層對真實dom節(jié)點的抽象，通過js對象（vdom）作為基礎(chǔ)的樹，使用對象的屬性來描述節(jié)點，最后通過一系列的操作反映到真實節(jié)點上。

為什么需要虛擬dom

使用用傳統(tǒng)的原生api或jQuery去操作DOM時，瀏覽器會從構(gòu)建DOM樹開始從頭到尾執(zhí)行一遍流程，當(dāng)我們需要更新多個dom結(jié)點的時候，傳統(tǒng)的操作，會一個一個進行操作，最終 頻繁的dom操作引起的瀏覽器的回流和重繪造成
性能開銷大，虛擬dom出現(xiàn)是在針對性的對需要更新的dom進行修改，會在指定時間內(nèi)對修改的dom進行批量更新，從而減少性能的消耗；

簡單實現(xiàn)虛擬dom

//node 節(jié)點
 var node = {
    tagName: 'div',
    css: {
        width: '100px' ,
        height: '100px' ,
        backgroundColor: 'red'
    },
    events:{
        onClick: ()=> {
            console.log('virtual dom')
        }
    },
    children: [
        {
            tagName: 'span',
            attr: {
                innerText: 'nice'
            }
        }
    ]
 }

      function addAttr(obj, attrs) {
              for(let keyName in attrs) {
                obj[keyName] = attrs[keyName]
              }
      }
     function render(node) {
        const vNode = document.creatElement(node.tagName)
        const {css, attr, events, children} = node
        addAttr(vNode.style, css)
        addAttr(vNode, attr)
        addAttr(vNode, events)
        if(node.children) {
            for(let child of node.children) {
                vNode.append(render(child))
            }
        }

        return vNode
     }