虚拟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进行对比，找出新旧节点间最少的修改。