vuekey值作用（Vue中key）
相信很多小伙伴跟我一样在使用v-for的时候对key值的存在和必要性有疑问 ，通过ESlint进行代码检查的时候不加上key还会报错 ，想知道key为什么存在可以先想想key为什么产生 ，会不会是尤雨溪灵光一闪就给Vue添加上了key?也有可能 ，不过存在即为合理 ，咱们来看看key的合理性 。
官方的相关解释
key使用在Vue的虚拟DOM算法 ，在新旧vNodes（虚拟节点）对比的时候对节点进行辨别 。
如果不使用key ，Vue会使用最大限度减少动态元素并且尽可能修改复用相同类型元素；
如果使用key ，Vue会基于key的变化重新排列元素顺序 ，并且移除/销毁key不存在的元素；
乍一看上面的内容 ，确实不易理解 ，咱们通过底层代码的实现逻辑来学习一下key 。下文A代表旧的虚拟节点数组 ，A1代表新的虚拟节点数组 ，a代表旧的虚拟节点 ，a1代表新的虚拟节点
无key时的逻辑
分为三个步骤
1.比较A和A1之间的长度 ，找出较短的数组；
2.如果对比的时候 ，新旧虚拟节点的类型和内容完全一致 ，那就不需要改变a1对应的内容 ，直接进行patch即可；
3.如果A1的长度比A的数组长度短 ，那么就卸载抛弃多余的节点 ，
如果A1的长度比A的数组长度长 ，那么就增加新的节点 。
有key时的逻辑
分为五个步骤
1.通过while循环从首部开始比较 ，拿到a和a1 ，比较两者的type和key是否相同 ，如果相同 ，就直接patch复用 ，如果a和a1不同 ，进行下一步；
2.通过while循环从尾部进行比较 ，拿到a和a2 ，比较两者的type和key是否相同 ，如果相同 ，还是直接复用 ，如果不同 ，进行下一步；
3.如果A1的长度比A的长度大 ，通过mount挂载新的节点；
4.如果A1的长度比A的长度小 ，通过unmount卸载移除节点；
5.中间无序部分 ，通过key指引的方式来进行 ，如果有相同的key ，就直接通过key进行patch操作 ，如果key与在原来A的位置不同 ，通过移动的方式进行操作 ，如果A+有多或者少 ，通过挂载后者移除操作 。
这个步骤的顺序也不难理解 ，我们做事情也是从前往后 ，小时候如果在班里比较调皮座位就会被调到前面 ，从后往前 ，有名单册的点名和没有名单册的点名 ，效率不同 。
心得体会
一个效果从设想到代码实现需要很多思考 ，想想key的实现步骤就有好多 ，由物到人 ，愿意等你把说出来的变成做出来的人也难能可贵 ，且行且珍惜 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！