v-for中key的原理

虚拟DOM中key的作用

使用v-for时一定要写:key，代表不同节点

key是为了给节点一个标识，相当于人类社会的身份证号。

需要使用key声明数据中的哪项作为节点的唯一标识，比如id====>:key="item.id"

使用index做key的坑

可能会引发的问题：对数据进行破坏顺序操作时会产生没必要的真实DOM更新，效率低；

结构中包含输入类的DOM，会产生DOM错误更新，界面有问题

具体过程：vue根据原始数据生成初始虚拟DOM,再将初始虚拟DOM转成真实DOM，往数组前面里添加新的item时，vue会根据新的数据生成新虚拟DOM，所有item的index都会改变，再进行虚拟DOM对比算法（diff算法），从初始虚拟DOM中寻找相同key的节点，结果不同时不会复用（造成效率低），结果相同时复用，用户操作的真实DOM在虚拟DOM中不体现，会按结果相同将其复用，也就是会将操作过的真实DOM按照未添加新数据时的key渲染，与未添加新数据时对应的数据会跑偏。

以下图示说明，引用（尚硅谷天禹男神ppt）

id作为key时，大大提高效率，数据也不会跑偏