vue key

可以作为key的类型

number string boolean symbol

key的作用

key主要起到一个标识的作用，当发生数据更新的时候，如果不使用key，vue会最大限度的减少动态元素并且尽可能就地进行元素的更新，这种策略会使dom重新渲染更快，节省性能，但是有时候会出现bug；当有key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

v-for中不使用key或者使用index作为key产生的bug

<div class="item" v-for="(item, index) in arr">
  <span>{{ test[item - 1] }}</span>
  <input type="text" />
  <button @click="deleteArr(index)">删除</button>
</div>

data() {
  return {
    arr: [1, 2, 3],
  }
},
methods: {
  deleteArr(index) {
    this.arr.splice(index, 1)
  },
},

• 不使用key或者使用inex（索引）作为key
  
  删除第二个结果显示为删除第三个
  
  备注：过渡中不使用key将不会触发过渡效果