📖为什么说 Vue 中的 key 不建议是 index？

前言

1：key 做为每一条数据的唯一标识，有相同父元素的子元素必须有独特的key，重复的key会导致渲染错误

2：当数据中对应的key发生改变时，会重新渲染这条数据（这里的渲染是指将旧数据删除并插入新数据而不是修改），因此会触发过渡

全部代码

<template>
  <div id="v_for_key">
    <ul class="list-group list-group-horizontal">
      <li class="list-group-item "><p><code>试验一：key为index</code></p>
        <ul>
          <li v-for='(list,index) in name' :key='index'>{{list}}</li>
        </ul>
      </li>
      <li class="list-group-item" style="margin-top:20px;"><p><code>试验一：key为list</code></p>
        <ul>
          <li v-for='list in name' :key='list'>{{list}}</li>
        </ul>
      </li>
    </ul>
    <button @click='but_fun'>删除</button>
    <button @click='add_fun'>添加</button>
  </div>
</template>

<script type="text/javascript">
  export default{
    name:'v_for_key',
    data(){
      return {
        name:['A','B','C','D'],
        i:1,
      }
    },
    methods:{
      but_fun:function(){
        this.name.splice(3,1);
      },
      add_fun:function(){
        this.i++;
        this.name.push(this.i)
      }
    }
  }

</script>
<style scoped>
</style>

1：当key是index时

手动修改浏览器中的数据，每条数据的中key为数组的索引，如下图

当我们点击删除时数据发生改变，如下图

上面三个数据对应所在的索引没有改变，所以还是修改后的数据

下面三个因为所在索引发生了改变，所以被重新渲染了（此处的重新渲染是指删除了原数据并插入新的数据与对应的key）

2：当key是list时

依旧用手动修改一下浏览器中的数据，每条数据的中key为数据的值，如下图

当我们点击删除时数据发生改变，如下图

删除了对应的数据（D），但D下面的数据中的key并未发生改变所以不会被重新渲染

总结

回到标题：为什么不建议 key 是 index？

因为每当在列表中增删数据时key都会发生改变

当key绑定是index(数组所在位置索引)时，增删数据时，数据中的key也会发生改变，这也失去了key所存在的意义

当key值发生改变，会重新渲染key所绑定的对应数据，是将旧数据删除并插入新的数据