理解vue中v-for循环中得key原理及一些错误

作用：给节点做一个标识，相当于人类的身份证号,虚拟DOM中的标识

下列是key值的一些使用场景和带来的问题：

 

js:

   const vm = new Vue({

            el: '#root',

            data: {

                persons: [

                    { id: 001, name: '小卢', age: 18 },

                    { id: 002, name: '小刘', age: 19 },

                    { id: 003, name: '小胡', age: 20 },

                ]

            },

            methods: {

                add() {

                    const t = { id: 004, name: '小王', age: 40 };

                    this.persons.unshift(t)

                }

               

            },

        })

 

html:

第一种情况：将key的值设为index索引,这也是如果你不设置单独的key时,Vue默认将index索引作为key的值

   <div id="root">

        <ul>

            <li v-for="(p,index) in persons" :key="index">    

  　　　　　　{{p.name}} <input type="text">

            </li>

        <button @click="add">添加一个小王</button>

        </ul>

    </div>

运行流程:初始数据=>虚拟数据=>真实DOM=>按钮后的新数据=>虚拟新数据=>虚拟进行diff对比算法=>新Dom

后果：如第一种情况如果你在真实dom中输入了值就会出现对应出错的问题.因为在diff对比中，输入类的DOM是一样的，diff就会将原来的DOM复制过来直接渲染在页面上。然后会打乱diff复制的算法，使后面的dom都需要重新从虚拟DOM里面转为真实DOM,使效率变低

总结：如果你对数据进行逆向添加，逆序删除等操作，就会产生没必要的DOM更新

　　　如果结构中还包含输入类的DOM,会产生页面有问题