key——类型：Number/String

1，作用：

保证唯一性，防止重复渲染，导致的额外性能开销

作为唯一标识节点加速虚拟DOM渲染

2，最常见的用例是结合 v-for：

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

注：有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

例1——相同父级使用index出现报错信息

<div class="page">
  <div class="oneSection">
    <el-button
      v-for="(item, index) in displayData"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
    <el-button
      v-for="(item, index) in displayData"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
</div>

例2——相同父级使用id作为key值没有出现报错信息

<div class="oneSection">
  <el-button
    v-for="item in displayDataOne"
    size="medium"
    :key="item.id"
  >{{ item.name }}
  </el-button>
  <el-button
    v-for="item in displayDataTwo"
   size="medium"
   :key="item.id"
 >{{ item.name }}
 </el-button>
</div>

例子3：不同的父级元素使用index没有出现报错信息

<div class="page">
  <div class="oneSection">
    <el-button
      v-for="(item, index) in itemOne"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
  <div class="twoSection">
    <el-button
      v-for="(item, index) in itemTwo"
      size="medium"
      :key="index"
    >{{ item.name }}
    </el-button>
  </div>
</div>

同一父级下的规避方法

法一

<div>
    <div v-for="(item, i) in itemOne" :key="i"></div>

    <div v-for="(item, i) in itemTwo" :key="'A'+ i"></div>

    <div v-for="(item, i) in itemThree" :key="'B'+ i"></div>
</div>

法二

使用能代表该数据的唯一性的值作为key值，例如id，前提是需要渲染的数据里面有id值

<div>
    <div v-for="item in itemOne" :key="item.id"></div>

    <div v-for="item in itemTwo" :key="item.id"></div>

    <div v-for="item in itemThree" :key="item.id"></div>
</div>

注：A,B 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性