仮想DOM && diffのアルゴリズム

戦争のクラスに対して一千のフロント、Rayson.Jin学習パンチ！
今日は仮想DOMと差分アルゴリズムを導入します。

まず、仮想DOMは何ですか

1.オブジェクトは実際の構造のDOMノードシミュレートするために、オブジェクトモデルである
（実際のメモリマッピング層DOMに属する仮想DOMメモリオブジェクト（JSメモリオブジェクト）実際にある）
2が便利なツールを提供し、従って開発効率が確保されることが
効率が保証されるように、DOMを最小限の動作を保証する3.

第二に、仮想DOMを使用しての基本的なプロセス（最初の4つのステップ）

データが入手1.
VDOM作成2.
3.レンダリングVDOM実際のDOM
4.変更データ
5.二回VDOMより差分アルゴリズム、新世代と組み合わせて、新たなデータの前に仮想DOMツリー仮想DOMツリー
ページの構造の変化、および他の場所にレンダリングされたパッチの鍵は、オブジェクト6は、変更されていない（慣性の原則の仮想DOM）の変更なしです

//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结构的渲染

第三に、差分アルゴリズムは何ですか

二回VDOM構造よりも実行するために使用

第四には、実行のdiffアルゴリズムの終了後、キーを返します

<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>

注：VUEはMVVMフレームワークであり、理由の一つは、高性能であるVueのVDOM