虚拟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.根据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


### 关于diff算法返回的key


<div id='box'>
    <ul>
        <li v-for = '(item,index) in list' :key = 'item.id'>
            <p>{{item.text}}</p>
            <div>
                <button @click = 'changeStyle'>修改</button>
                <button @click = 'remove(index)'>删除</button>
            </div>
        </li>
    </ul>
</div>

<script>
    //id为
    new Vue({
        el:'#app',
        data:{
            list:[{
                id:1,
                text:'敲代码1'
            }，
            {
                id：2，
                text：'敲代码2'
            }
            ]
        },
        methods:{
            changeStyle(e){
                //接下来写的是为了给你们看key的做用，这段代码不要出现
                e.target.parentNode.parentNode.style.background = 'red'
                //删除之后会有上一层的样式
            },
            remove(index){
                this.list.splice(index,1)
            }
        }
    })
</script>




总结： 虚拟dom的执行步骤

​           1.获取数据

​           2.建立虚拟dom（这一步建立的是jsx语法糖，什么是虚拟dom？就是一个对象，里面模拟了真实dom的数据结构）

​           3.经过render函数解析jsx（js+xml的语法糖）,将其转化成虚拟dom结构，再将虚拟dom渲染成真实的dom

​           4.当数据更改以后又会生成一次虚拟dom结构，这是时候就须要diff算法对比两次虚拟dom，**不一样之处**会生成一个patch对象，（因为diff算法进行的是同级比较，并且会返回一个key值）再根据这个key值将patch对象渲染到页面中改变的结构上。（其余没有改变的地方是不作修改的，这就是虚拟dom的惰性原则）