1. key有什么用？
为了提升渲染速度。当两个元素位置发生改变时vue不会对整个列表进行重新渲染，而只是更换一下dom的顺序，这样可以减少资源消耗。
2. 不加key会导致什么问题？
循环渲染后，如果有一项被删掉了，那么会出现以下问题
第n项的属性num为1，我们执行n.num - 1，然后判断如果n.num为0则删掉n这一项。
n被删掉后，的n+1便被排到了原本n的位置上，这时候，会出现一个问题，n.num在页面上显示 成了0，
虽然打印n.num是1，但是页面上却显示为0，我猜测应该是由于vue的更新机制导致复用了之前被删除的那个n的num值。
3. key应该设置为什么？
（1）首先，如果你不存在上述这种位置变更或者元素被删除的需求，就不需要设置key，虽然vue会报警告。
（2）key的设置，要保证其唯一性，也就是说要保证每一项的key永远都不一样，我习惯性用:key="index"来设置key。
（3）但是我今天发现一个问题，当出现上述情况的时候，:key="index"会出现上述结果。因为n+1的index由n+1变为了n，导致他复用了原本的n的num属性。所以应当用item.id这种唯一的属性值来设置key，比如商品id。
（4）最近在写外卖项目的时候，由于加入了周来区分商品，所以就算商品id一样，周不同的话也属于不同的商品，会同时出现在列表里，
所以我使用了:key="item.week+item.id"这样的拼接值来保证key的唯一性，否则还是会出现列表里的多项是同样的id或者week
（下面是vue官方对key的解释）
网友评论