• key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes：如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

举个例子，假设原来有 [1, 2, 3] 三个子节点渲染了，假设我们这么操作了一波，将顺序打乱变成 [3, 1, 2]，并且删除了最后一个，变成 [3, 1]。那，最优的 diff 思路应该是复用 3, 1组件，移动一下位置，去掉 2 组件，这样整体是开销最小的，如果有 key 的话，这波操作水到渠成，如果没有 key 的话，那么就要多一些操作了:

• 判断哪些可以复用，有 key 只需要从映射中看看 3, 1在不在，没有 key 的话，可能就执行替换了，肯定比「复用」「移动」开销大了

• 删除了哪一个？新增了哪一个？有 key 的话是不是很好判断嘛，之前的映射没有的 key，比如变成 [3, 1, 4]那这个 4 很容易判断出应该是新建的，删除也同理但是没有 key 的话就麻烦一些了

• 不使用随机数：不利于diff算法，无意义，需全部重绘

• 不使用数组下标

• vue中使用数组下标会导致删除异常

• react中会全部列表重绘

//1、vue
//执行结果 1，2，3 -> 1, 2
//解析：vue中key值【0，1，2】-> [0, 1]，比较时认为删除了第三个，实际需删除第一个
<ul>
  <li v-for="(value, index) in arr" :key="index">
    <test/>
  </li>
</ul>
data(){
  return {
    arr: [1, 2, 3]
  }
},
methods: {
   handleDelete(){
     this.arr.splice(0, 1)
   }
}