vue-虚拟DOM理解

    1.性能损耗原理

 var box = document.querySelector('.box') ;
    console.time('temp')
        var num = 1 ;
        var _num = 1 ;
        box.innerHTML = num ;
        for( var i = 0 ; i < 10000 ; i++ ){
            var box = document.querySelector('.box') ;
            _num  ++  ;
            box.innerHTML = _num ;
        }
    console.timeEnd('temp')  // 80
        console.time('temp')
            var num = 0 ;
            for( var i = 0 ; i <= 10000 ; i++ ){
                ++num ;
            }
            box.innerHTML = num ;
        console.timeEnd('temp') //0.8

    2.虚拟DOM的使用

<body>
    <div class="box">
       <div class="content">
           <ul class="list">

           </ul>
           <p>
                2
           </p>
       </div>
    </div>
</body>
<script>
1.生成DOM树
 var vDom = {
            tag:'div',
            attr:{
                className:'box'
            },
            content:[
                {
                    tag:'div',
                    attr:{
                        className:'content'
                    },
                    content:[
                        {
                            tag:'ul',
                            attr:{
                                className:'list'
                            }
                        },
                        {
                            tag:'p',
                            content:2
                        }
                    ]
                }
            ]
        }
2.页面渲染
var data = []
3.改变数据
data.push('zsq')
data.push('zsq')
data.push('zsq')

4.重新生成DOM树 
var vDom = {
                tag:'div',
                attr:{
                    className:'box'
                },
                content:[
                    {
                        tag:'div',
                        attr:{
                            className:'content'
                        },
                        content:[
                            {
                                tag:'ul',
                                attr:{
                                    className:'list'
                                },
                                content:[
                                    {
                                        tag:'li',
                                        content:'zsq'
                                    },
                                    {
                                        tag:'li',
                                        content:'zsq'
                                    },
                                    {
                                        tag:'li',
                                        content:'zsq'
                                    }
                                ]
                            },
                            {
                                tag:'p',
                                content:2
                            }
                        ]
                    }
                ]
            }
5. 将两次的vDom进行对比，发现有不同的地方
6. 根据（diff算法） 将不同的渲染出来,一样的地方不做任何改变

增强训练查阅diff的用法
1.用来比较两个文本文件之间的差异
$diff<"变动前文本"><"变动后文本">

vue-虚拟DOM理解

推荐阅读更多精彩内容