虚拟dom

1. 什么是虚拟 dom ？ 　　

　　所谓的虚拟DOM，顾名思义并不是真实的Dom，它其实就是用 JS 来模拟DOM结构，把DOM的变化操作放在JS层来做，尽量减少对DOM的操作。然后对比前后两次的虚拟DOM的变化，只重新渲染变化了的部分，而没有变化的部分则不会重新渲染。前后的两次对比通过 diff 算法进行对比操作, 如下图所示。

 2. 通过 js 对象模拟DOM树的数据结构

一个真实的DOM

<div id="content">
    <p>{{ 1+1}}</p>
    <ul class="list-group">

    </ul>
</div>

 

虚拟DOM

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

 

3. 为什么要用虚拟DOM渲染?

　　处理虚拟DOM的速度比操作真实DOM更快。

4. 虚拟DOM操作的流程

<div id="content">
    <p>{{ 1+1}}</p>
    <ul class="list-group">

    </ul>
</div>

<script>
    var data = {
        arr:[]
    }

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

    //2.将内存中的虚拟dom树初始化渲染成真实dom树
    //3.当我们修改data里面的数据的时候
    data.arr.push("<li>111111</li>")
    data.arr.push("<li>222222</li>")
    //4.将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
    var newDom = {
        tag:"div",
        attr:{
            id:"content"
        },
        children:[
            {tag:"p",content:2},
            {tag:"ul",attrs:{className:"list-group"},children:[
                {tag:"li",content:"11111"},
                {tag:"li",content:"22222"}
            ]}
        ]
    }
    //5.将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比，对比差异（diff算法）
    //6.将对比出来的差异的部分进行重新真实dom结构的渲染


    /*
        内部当数据变化，生成一颗新的虚拟dom树，与上一次的虚拟dom树结构进行对比。也就是说，当数据变化的时候，
        大量操作的是虚拟dom,而虚拟dom属于内存数据，操作起来性能要高的多。而真实的dom操作，只有在追加的那一刻
        才会进行操作，大大提升了性能。
    */


</script>