v-for为什么需要加key？
作用
加
key，是为了高效的更新虚拟DOM，防止重复渲染，导致的额外渲染性能开销key属性可以避免数据混乱的情况出现
原理
Vue实现了一套虚拟DOM，使我们可以不直接操作DOM元素只操作数据，就可以重新渲染页面，而隐藏在背后的原理是高效的Diff算法当页面数据发生变化时，
Diff算法只会比较同一层级的节点；如果节点类型不同，直接干掉前面的节点，再创建并插入新的节点，不会再比较这个节点后面的子节点；如果节点类型相同，则会重新设置该节点属性，从而实现节点更新
使用
key给每个节点做一个唯一标识，Diff算法就可以正确失败此节点，"就地更新"找到正确的位置插入新的节点。
示例
假定我们有一组数据
key: 0 index: 0 name: test1
key: 1 index: 1 name: test2
key: 2 index: 2 name: test3现在我们要向上面这组数据加入一条新数据
name: 我是插队的那条数据如果我们v-for没有加key
之前的数据 之后的数据
key: 0 index: 0 name: test1 key: 0 index: 0 name: test1
key: 1 index: 1 name: test2 key: 1 index: 1 name: 我是插队的那条数据
key: 2 index: 2 name: test3 key: 2 index: 2 name: test2
key: 3 index: 3 name: test3通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染
如果我们使用唯一id作为key
之前的数据 之后的数据
key: 1 id: 1 index: 0 name: test1 key: 1 id: 1 index: 0 name: test1
key: 2 id: 2 index: 1 name: test2 key: 4 id: 4 index: 1 name: 我是插队的那条数据
key: 3 id: 3 index: 2 name: test3 key: 2 id: 2 index: 2 name: test2
key: 3 id: 3 index: 3 name: test3现在对比发现只有一条数据变化了,就是id为4的那条数据,因此只要新渲染这一条数据就可以了,其他都是就复用之前的
这样遵循了Vue算法的复用原则，减少了重新的渲染开销
注意事项
key的值只能是字符串或数字类型key的值必须具有唯一性（即：key的值不能重复）建议把数据项
id属性的值作为key的值（因为 id 属性的值具有唯一性）使用
index的值当作key的值没有任何意义（因为index的值不具有唯一性）建议使用
v-for指令时一定要指定key的值（既提升性能、又防止列表状态紊乱）