虚拟DOM

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如何新建


全部评论

相关推荐

点赞 收藏 评论
分享
牛客网
牛客企业服务