vue中key的作用，为什么不建议用index作为key

vue中key的作用

vue中key值的作用可以分为两种情况来考虑，话不多说

1. 这第一种情况是在v-if中使用key。由于vue会尽可能高效渲染元素，通常会复用已有元素而不是从头开始渲染。因此当使用v-if来实现元素切换的时候，如果切换前后含有相同类型的元素，那么这个元素就会被复用。如果是相同的input元素，那么切换前后用户输入不会被清除掉，这样是不符合需求的。因此可以通过使用key来唯一的识别这个元素，这个情况下，使用key的元素就会被复用。这个时候key的作用是用来识别一个独立的元素。
2. 第二种情况是v-for中使用key、用v-for更新已渲染过的元素列表时，它默认使用“就地复用”的测略。如果数据项的顺序发生了改变，vue不会移动DOM元素来匹配数据的顺序，而是简单复用此处的每个元素。因此通过每个列表提供一个key值，来以便vue跟踪元素的身份，从而高效的实现复用。这个时候key的作用是为了高效的更新渲染虚拟DOM。

key是vue中vnode的唯一标识，通过这个key，diff操作可以更准确，更快速

1. 更准确：因为带key就不是就地复用了，在sameNode中函数a.key === b.key 对比中可以避免就地复用的情况。所以更准确。
2. 更快速：利用key的唯一性生成map对象来获取对应节点，比遍历方式更快

为什么不建议使用index作为key？

使用index 作为 key和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2…这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。