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


全部评论

相关推荐

不愿透露姓名的神秘牛友
07-02 15:39
点赞 评论 收藏
分享
点赞 评论 收藏
分享
06-13 10:15
门头沟学院 Java
想去夏威夷的大西瓜在...:我也是27届,但是我现在研一下了啥项目都没有呀咋办,哎,简历不知道咋写
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务