Virtual dom && diff algorithms

One thousand front against the war classes, Rayson.Jin learning punch!
Today to introduce virtual dom and diff algorithms.

First, what is a virtual dom

1. Object It is an object model to simulate the real structure dom node
(which is in fact a virtual dom-memory objects (js memory objects) belonging to real memory mapping layer dom)
2 provide a convenient tool, so that the development efficiency is assured
3. to ensure the operation of minimizing DOM, so efficiency is assured

Second, the basic process of using virtual dom (the first four steps)

1. Obtain data
2. Create vdom
3. The vdom rendered real dom
4. Change the data
5. Use the diff algorithm than twice vdom, the virtual dom tree before new data combined with a new generation virtual dom tree
6. the key to patch objects rendered to the change in the structure of the page, and other places has not changed is without any modification of (virtual dom of the principle of inertia)

//1.获取数据
var data = {
            arr:[]
        }
        //2.内存中生成一颗虚拟dom树，创建vdom   <div id="content"><p>2</p><ul class="list-group"></ul></div>
        var vDom = {
            tag:"div",
            attr:{
                id:"content"
            },
            children:[
                {tag:"p",content:2},
                {tag:"ul",attrs:{className:"list-group"}}
            ]
        }

        //3.将内存中的虚拟dom树初始化渲染成真实dom树
        //4.更改数据
        data.arr.push("<li>111</li>")
        data.arr.push("<li>222</li>")
        //5.使用diff算法比对两次vdom，将之前的虚拟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"}
                ]}
            ]
        }
        //6.将对比出来的差异的部分进行重新真实dom结构的渲染

Third, what is the diff algorithm

Used to do than twice vdom structure

Fourth, after the end of the run diff algorithm, return 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>

Note: vue is a mvvm framework, one of the reasons is the high-performance Vue vdom