为什么v-for要用key绑定？

为什么v-for要用key绑定？

为什么需要key？

在使用v-for渲染的时候 key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较

1. 旧虚拟dom中找到与新的虚拟dom的相同的key
   1.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
   2.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
2. 旧虚拟dom中未找到与新虚拟dom相同key
   1. 创建新的真实DOM，随后渲染到到页面。

如果用index作为key可能会引发的问题

 <!-- html -->
    <button @click.once="addPresent">添加一个人</button>
            <ul>
       <li v-for="(item,index) in listPresent" :key="index">{{item.name}}---<input type="text"></li>
                
            </ul>
    <!-- js-->
    <script>
    data() {
                return {
                    listPresent:[
                        {id:"001",name:'张三'},
                        {id:"002",name:'李四'},
                        {id:"003",name:'王二'},
                        {id:"004",name:'小明'},
                        {id:"005",name:'小王'},
                    ],
                    keyWrod:'',
                    sortType:0
                }
            },
      methods: {
                addPresent(){
                    this.listPresent.unshift({id:"006",name:'小刚'})
                }
            },
    </script>

操作	问题
若对数据进行：逆序添加、逆序删除等破坏顺序操作	会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM	会产生错误DOM更新 ==> 界面有问题

		当时用index作为key的唯一标识当在数组的头部添加一个元素的时候会出现input对应混乱并且效率不高原因在于

		当数据改变的时候Vue在使用v-for渲染DOM是会先创建新的虚拟DOM 会与当前页面中的dom进行对比进行更新 而在这个demo中 会出现 index作为key的标识渲染dom的时候出现 li 中key值不变 里面的内容是新生成的 input框还是原来的input 从而出现 input和内容对应出错

		当使用index作为key的唯一标识会影响v-for渲染dom的性能差（虚拟dom不能复用也可能导致错误）

key的唯一标识如何选着

1.最好使用每条数据的唯一标识作为key, 比如id、身份证号等唯一值。（最好）提高v-for的运行效率

不建议使用

2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示--------->v-for默认的key值是index