浅谈vue中的虚拟dom

浅谈vue中的虚拟dom

关键字 vue 虚拟dom

1. 写在前面： 在说虚拟dom之前，首先我们要先了解一下什么是真实的dom

2. 真实的dom
   在传统的开发中，原生js操作代码时，浏览器会：
   第一:先创建DOM树，第二：创建StyleRules，第三：创建Render树，第四：布局Layout，最后：绘制Painting，
   缺点：通过原生js操作dom代价比较高，因为会引起页面的重排重绘，增加浏览器的性能开销，降低页面渲染速度。
   这时候我们可以用虚拟dom来解决这些真实dom的缺点

3. 虚拟dom
   原理：根据虚拟dom数渲染成真实dom，当数据变化，或者是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom，拿新的虚拟dom来和旧的虚拟dom做对比（使用difff算法）。得到需要更新的地方之后，更新内容，这样的话，就能大量的提升性能

   虚拟dom原理的相关代码

   1.内存中生成一个虚拟dom树

   2.将内存中的虚拟dom树初始化渲染成真实dom树

        // 内存中生成一个虚拟dom树
        var oldDom = {
                tag: "div",
                attrs: {
                    id: "content"
                },
                children: [{
                    tag: "p",
                    content: 2
                }, {
                    tag: "p",
                    content: 2
                }, {
                    tag: "ul",
                    attrs: {
                        className: "list-group"
                    }
                }]
            }

3.修改data中的数据

// 修改data中的数据
 		data.arr.push("<li>11111</li>")
        data.arr.push("<li>22222</li>")

4.将之前的虚拟dom树结合新的数据生成一个新的虚拟dom树

// 将之前的虚拟dom树结合新的数据生成一个新的虚拟dom树
var newDom = {
                tag: "div",
                attrs: {
                    id: "content"
                },
                children: [{
                    tag: "p",
                    content: 2
                }, {
                    tag: "p",
                    content: 2
                }, {
                    tag: "ul",
                    attrs: {
                        className: "list-group"
                    },
                    children: [{
                        tag: "li",
                        content: 1111
                    }, {
                        tag: "li",
                        content: 2222
                    }]
                }]
            }

5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）

6.将对比出来的差异的部分进行重新真实dom结构的渲染