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的实现步骤就有好多，由物到人，愿意等你把说出来的变成做出来的人也难能可贵，且行且珍惜。