1. key作用：
保证唯一性，防止重复渲染，导致的额外性能开销 作为唯一标识节点加速虚拟DOM渲染 最常见的用例是结合 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>
2. 同一父级下的规避方法
- 法一
<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的唯一性
