虛擬DOM是什麼？

問題： 什麼是虛擬DOM，我們爲什麼要用它，它與原生DOM有什麼區別？
在瀏覽器的標準裏面，DOM是非常複雜的，我們先寫一段基本的代碼來體現

  <script>
    let div = document.createElement('div')
    let dif
    for ( let key in div) {
      dif += key + ' '
    }
    console.log(dif)
  </script>

我們新建了一個空的div，並遍歷它的屬性打印到控制檯。可以看到，這個空的div有如此多的屬性。爲什麼它會有這麼多的屬性呢，DOM的標準設計就是這麼設計的，整個DOM非常的複雜。這就是爲什麼我們稍微操作一些DOM，瀏覽器的性能就會急速下降。所以儘可能的少操作DOM，也是各個性能優化的重點。
其實我們HTML用js去描述其實是一個很簡單的邏輯。我們寫一段簡單的HTML

<div id="app">
  <p class="item">節點1</p>
</div>

根據我們上述說的，這段簡單的HTML渲染完成之後會有太多太多的屬性。我們用js去描述它：

    function createElement() {
      return {
        tag: 'div',
        data: {id: 'app'},
        children: [{
          tag: 'p',
          data: {class: 'item'},
          children: ['節點1']
        }]
      }
    }

我們用很簡單的對象來描述上面的DOM結構，這就是所謂的虛擬DOM。
也可以說，由於瀏覽器的標準過於複雜，我們用js對象去描述原生的DOM，這個對象我們就稱之爲虛擬DOM。
像在React,Vue他們會用到虛擬DOM，我們想到頁面進行更新的時候，我們可以通過虛擬DOM進行對比，找出新舊節點間最少的修改。