1.虚拟DOM是什么？
我们先来看看真实的DOM 

    <script>
        //新建一个div
        let div = document.createElement('div')
        // 保存DOM中的所有属性
        let ret = ''
        // 遍历DOM中所有的属性
        for(let key in div) {
            ret += key + ' '
        }
        // 打印出DOM中所有的属性
        console.log(ret)
    </script>


接着我们可以看到整个DOM所有的属性，是非常的多的，这就是我们如果一操作真实的DOM，由于其属性过多，就会导致我们的属性急速下降，多以尽量减少操作DOM是各个性能优化的金科玉律。
图片说明

我们如何用JS来描述一个DOM呢？ 
<div id="app">
    <p class="item">节点1</p>
 </div>

用js对象描述一个DOM是非常简单的，就比如上面这个代码可以用下面的JS对象来描述 
createElement(){
    return {
        tag:'',
        data:{id:app},
        children:[
            {
                tag:'p',
                data:{class:'item'},
                children:['节点1']
            }
        ]
    }
}
我们可以通过简单的对象来描述我们的真实DOM，这就是虚拟DOM

2.虚拟DOM如何新建