浅谈Vue虚拟dom树

虚拟dom树，是可以在很大程度上减少由于我们频繁操作真实dom树而产生的性能消耗的

在这里举一个简单的例子

找到页面中的一个元素节点，将其innerHTML 中的num值，进行10000次操作，每次+1

 

        console.time("temp")  
        let myp = document.getElementById("myp")
        for(var i=0;i<10000;i++){
            let num = myp.innerHTML*1
            myp.innerHTML = ++num
        }
        console.timeEnd("temp")

 

 

 

此时，我们可以通过多次执行，来得出，进行以上操作，大概需要40ms

现在我们先将num进行10000次的+1，在内存中完成所有操作，然后一次性的将数值插入到真实dom树中

        console.time("temp")
        let myp = document.getElementById("myp")
        let num = 1  
        for(var i=0;i<10000;i++){
            num++
        }
        myp.innerHTML = num
        console.timeEnd("temp")

此时，我们也可以通过多次执行，得出，大概需要0.3秒

这样来看，操作真实dom树，会带来极大的性能消耗，所以有了虚拟dom树这个概念。

下面来讲解一下Vue中对虚拟dom是的概念以及操作

vue内部引入了虚拟dom概念 （js内存对象） 属于内存数据，真实dom的一层映射

 

　　比如：网页中现有这么一组真实dom树

　　

<div id="content">
        <p>2</p>
        <ul class="list-group">
            jj
        </ul>
 </div>

 

　　1.首先Vue在内存中生成一颗虚拟dom树

        var vDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:"2"},
                {tag:"ul",attr:{className:'list-group'}}
            ]
        }

 

　　 2.Vue将内存中的虚拟dom树进行初始化渲染，渲染成一颗真实dom树

 

　　3.当我们修改Vue实例中的数据的时候

　　　　this.arr.push("<li>11111</li><li>22222</li>")   

　　

　　4.Vue会将之前的虚拟dom树结合更新的数据生成一颗新的虚拟dom

        var newDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:"2"},
                {tag:"ul",attr:{className:'list-group'},children:[
                    {tag:"li",content:"11111"},
                    {tag:"li",content:"22222"}
                ]}
            ]
        }

　　

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

 

　　6.对比的差异的部分进行重新的真实dom的渲染。

这是Vue通过虚拟dom树操作来提高性能的一个方法，个人理解，可能会有出入，欢迎指正