虚拟dom && diff算法

概述虚拟dom && diff算法 1.虚拟dom是什么 ? 它是一个Object对象模型，用来模拟真实dom节点的结构 2.虚拟dom的使用基本流程（前四步骤） ? 1.获取数据 ? 2.创建vdom ? 3. 通过render函数解析jsx，将其转换成 vdom结构 ? 4.将vdom渲染成真实dom ? 5.数据更改了 ? 6.使用diff算法比对两次vdom,生成patch对象 ? 7.根据k 虚拟dom && diff算法

1.虚拟dom是什么

? 它是一个Object对象模型，用来模拟真实dom节点的结构

2.虚拟dom的使用基本流程（前四步骤）

? 1.获取数据

? 2.创建vdom

? 3. 通过render函数解析Jsx，将其转换成 vdom结构

? 4.将vdom渲染成真实dom

? 5.数据更改了

? 6.使用diff算法比对两次vdom,生成patch对象

? 7.根据key将patch对象渲染到页面中改变的结构上，而其他没有改变的地方是不做任何修改的（ 虚拟dom的惰性原则 ）

3.diff算法是什么

? 用来做比对两次vdom结构

4.diff算法运行结束后，返回是什么

? 返回一个key

注意：vue是一个mvvm框架，Vue高性能的原因之一就是vdom

深化：Vue vdom 比较 React vdom 有何不一样？

//需求：有一个变量count的初始值为0，经过一系列的运算,得到10001，然后将结果写入Box中<div class='Box'></div><script>    var Box = document.querySelect('.Box')    var count = 0        //console.time('a')    //for(var i=0;i<10001;i++){    //  count++    //  Box.INNERHTML = count      //这里 *** 作了10000次dom    //}    //console.timeEnd('a')///////////////////////////////////////////////////////     console.time('b')    for(var i=0;i<10001;i++){        count++    }    Box.INNERHTML = count         //正常写法 *** 作一次dom    console.timeEnd('b')                </script>

结论：1.更少的dom *** 作会更加减少时间花费，减少性能损耗

? 2.所以我们应该 先 *** 作数据 再去 *** 作dom

? 3.由以上结论慢慢的前端将一个新的概念引入在框架中 （这个概念就是虚拟dom）

虚拟dom

所谓的virtual dom，也就是虚拟节点

<script>    //1.vdom是什么？    //它是一个Object对象模型，用来模拟真实的dom结构    //需求：vdom如何模拟真实dom,如果将来我想再增加一个li，里面的内容为：你好        <div class='Box'>        <ul class='List'>            <li>这里是1903</li>        </ul>    </div>        var List = document.querySelect('.List')    var li = documenr.createElement('li')    li.INNERHTML = '你好'    List.appendChild(li)            //以上的每一步都 *** 作了dom，真实的dom！    </script>

vdom的使用流程

? 1.获取数据

? 2.创建虚拟dom

//1.获取数据(AJAX,fetch)    var data = {        ID:1,name:'1903'    }//2.创建vdom      var vdom = {        tag：'div',attr:{            classname:'Box'        },content:[            {                tag:'ul',content:[                    {                        tag:'li',content:data.name  //'这里是1903'                    }                ]            }        ]    }    //3.初次渲染vdom（vdom渲染成 真实dom）    var div = document.creatElement('div')    div.calssname = 'Box'    var ul = document.creatElement('ul')    var li = document.creatElement('li')//vue中 使用的是一个叫做Jsx语法 + render函数    function render(createElment){        //vu已经封装好这个方法 就是{{}}可以用的原因    }    //但是我们的网页结构一般都是很复杂的，这时候我们使用vdom去模拟dom结构,发现vdom这个对象模型太大了，也       //太长了，所以我们想，如果能在Js中也能够书写dom标签结构那就好了，所以结合了Js+xml搞出了一个新的语法    //糖 Jsx，用Jsx来模拟vdom//通过render函数解析Jsx，将其解析成vdom结构//4.将vdom渲染成真实dom//5.数据更改了，data.name = '骏哥' 又生成虚拟dom（vdom）结构     //在这之中 //使用diff算法用来做比对两次vdom        //diff算法是比较两个文件的差异，并将两个文件的不同之处，将这个不同之处生成一个补丁对象（patch.Js）        //diff算法来源后端            //前端将其应用于虚拟dom的diff算法            //vue中将虚拟dom的diff算法放在了patch.Js            //使用Js来进行两个对象的比较（vdom 对象模型）            //diff算法是同级比较                //给每一个层级打一个标记，这个标记是一个数字（这个数字就是key）//6.再通过render函数渲染成真实dom

总结

以上是内存溢出为你收集整理的虚拟dom && diff算法全部内容，希望文章能够帮你解决虚拟dom && diff算法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。