v-for中为什么要用key
- vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。
- key主要用来做dom diff算法用的，diff算法是同级比较，比较当前标签上的key还有它当前的标签名，如果key和标签名都一样时只是做了一个移动的操作，不会重新创建元素和删除元素。
- 没有key的时候默认使用的是“就地复用”策略。如果数据项的顺序被改变，Vue不是移动Dom元素来匹配数据项的改变，而是简单复用原来位置的每个元素。如果删除第一个元素，在进行比较时发现标签一样值不一样时，就会复用之前的位置，将新值直接放到该位置，以此类推，最后多出一个就会把最后一个删除掉。
- 尽量不要使用索引值index作key值，一定要用唯一标识的值，如id等。因为若用数组索引index为key，当向数组中指定位置插入一个新元素后，因为这时候会重新更新index索引，对应着后面的虚拟DOM的key值全部更新了，这个时候还是会做不必要的更新，就像没有加key一样，因此index虽然能够解决key不冲突的问题，但是并不能解决复用的情况。如果是静态数据，用索引号index做key值是没有问题的。
- 标签名一样，key一样这时候就会就地复用，如果标签名不一样，key一样不会复用。
Vue中为v-for提供了一个属性key：
key属性可以用来提升v-for渲染的效率！，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去，在使用v-for的时候，vue里面需要我们给元素添加一个key属性，这个key属性必须是唯一的标识，给key赋值的内容不能是可变的。
- 在写v-for的时候，都需要给元素加上一个key属性。
- key的主要作用就是用来提高渲染性能的！
- key属性可以避免数据混乱的情况出现 （如果元素中包含了有临时数据的元素，如果不用key就会产生数据混乱）。
实例
<template>
<div class="app">
<ul>
<li v-for="(v, i) in list" :key="i">
<input type="checkbox" :value="v.title" />
{{ v.title }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{ id: 1, title: 'A' },
{ id: 2, title: 'B' },
{ id: 3, title: 'C' }
]
}
}
}
</script>
<style lang="scss">
ul li{
list-style: none;
}
</style>
