vue中的key

<ul>
    <!-- <li v-for="(item,index) in person" :key="index">{{item.name}}</li> -->
    <li v-for="item in person" :key="item.id">{{item.name}}</li>
</ul>
person:[
  {id:1,name:'张三'},
  {id:2,name:'李四'},
  {id:3,name:'王五'},
]

在vue中写v-for的时候通常要写上key，这个key可以写成该数组的index，也可以写成每一项的唯一标识，比如id，那么为什么要写这个key呢？
在页面中的DOM更新的时候vue会用自身的diff算法在虚拟DOM中进行新旧虚拟DOM的对比，对比的依据就是key的值，如果key的值相同，那么再比较这一项里面的内容是否相同，如果相同就直接输出，如果不同再进行替换。
如果在数组的后面插入一项的话，使用id当做key或者index当做key对效率是没有影响的，因为之前已有的项的index没有发生变化，也就是说相同的一项key的值没有发生变化；
但是如果在数组的前面增加了一项，或者中间插入了一项，这样就需要使用唯一标识来作为key，因为此时的数组中的index值发生了变化，相同的一项的key的值和之前不一样了，如果还使用index作为key在进行diff算法对比时会替换重复的内容，让DOM渲染的效率降低。
如果数组中的每一项的顺序没有发生变化（改变前和改变后的index值相同）的情况下，可以使用index作为key，如果数组中的顺序发生变化（改变前和改变后的index值相同），最好使用唯一标识来作为key避免效率的降低，如果不写key，vue在解析的时候会默认解析成遍历数组的index值。