key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：
- 完整地触发组件的生命周期钩子
- 触发过渡
假设有三个子组件，每个子组件里面有一个有状态的孙子组件。
Herman 的个人博客
<Child v-for="item in array" :text="item" @delete="remove(i)"/>
// array: [1, 2, 3]
进行删除操作时（删除2）
key 时，vue遍历2个数组，对比发现1没变，并且因为是相同类型的元素于是复用1，然后对比发现2变成了3，于是将2改成3，但子元素没变，就地复用，于是就会出现问题，最后3被删除了，于是删除3对应的子元素key时，会基于 key 的变化重新排列元素顺序不要用index作为key
上面同样的情况，如果使用index作为key，删除第二项的时候，index从1 2 3 变成 1 2，vue会基于key，认为你删除了第三项