vue中v-for使用key

什么是key？

vue中列表循环需要加上的一个属性，不加，系统就会提示报错，:key=“唯一标识” 唯一标识可以是item里面id（index）等，因为vue组件高度复用性，增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

所以，key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

比如：在我们使用v-for的时候，给加上的，相当于id

<ul><li v-for="item in str" :key="item.id">{{item}}</li>
</ul>

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Comp :key="+new Date()" />

总结：在vue中，key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

示例区别：

第一种：当我们在使用v-for时，需要给单元加上key

如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。

如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed。

第二种：用+new Date()生成的时间戳作为key，手动强制触发重新渲染。

不推荐v-for里的index当做key使用

当以数组为下标的index作为key值时，其中一个元素(例如增删改查)发生了变化就有可能导致所有的元素的key值发生改变
diff算法时比较同级之间的不同，以key来进行关联，当对数组进行下标的变换时，比如删除第一条数据，那么以后所有的index都会发生改变，那么key自然也跟着全部发生改变，所以index作为key值是不稳定的，而这种不稳定性有可能导致性能的浪费，导致diff无法关联起上一次一样的数据。因此，能不使用index作为key就不使用index。