vue中key的作用

在 v-if 中
表达这两个元素是完全独立的，不要复用它们，只需添加一个具有唯一值的 key 属性即可

<!-- 例如，如果你允许用户在不同的登录方式之间切换，下面的代码中切换 type 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，span标签不会被替换掉，仅仅是替换了它的 placeholder`。 -->
<template v-if="type == 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>

<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

在 v-for 中
当使用列表渲染时，添加key属性，这样可以提高列表渲染的效率，提高了页面的性能。

<!-- 假设 numbers 的值是[1, 2, 3, 4, 5, 6] -->
<div v-for="num in numbers">
  {{num}}
</div>

这种情况下渲染了6个 <div> 元素，其中的内容对应 numbers 中6个数字，此时如果numbers变成了[0, 1, 2, 3, 4, 5, 6]，即在数组头部插入了一个数字 0，在没有key属性的情况下，渲染输出的更新步骤是这样的：
原先内容为 1 的 <div> 元素内容变成 0，原先内容为 2 的 <div> 元素内容变成 1，……以此类推，最后新增一个 <div> 元素，内容为 6

在这种情况下，Vue会通过改变原来元素的内容和增加 /减少元素来完成这个改变，因为没有key属性，Vue无法跟踪每个节点，只能通过这样的方法来完成变更。

加上key的情况

<div v-for="(num, index) in numbers" :key="index">
  {{num}}
</div>

使用用index变量，根据列表渲染的规则，它对应了数组中每个元素的索引，使得每个元素的key值都不同，必须保证同一父元素的所有子元素有不同的key属性

此时如果 numbers 从 [1, 2, 3, 4, 5, 6]变成了[0, 1, 2, 3, 4, 5, 6]，渲染输出的更新步骤就变化了：

新增一个 <div> 元素，它的内容为 0，并将它插入原先内容为 1 的元素之前
在有了 key 属性之后，Vue 会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有 key 属性时的就地复用策略效率更高。