vue，transition-group标签:key=“index“引发的BUG

bug描述：动画没有效果，动画的类没有加到dom上面

// 原始代码,没有任何效果，dom上没有添加.list-move,.list-leave-active等类名
<transition-group
      name="list"
      tag="div"
      id="shelf-list"
    >
      <div
        class="shelf-list-item"
        v-for="(item, index) in shelfList"
        :key="index"
      >
        ......
      </div>
</transition-group>

// 修改后代码，效果正常
<transition-group
      name="list"
      tag="div"
      id="shelf-list"
    >
      <div
        class="shelf-list-item"
        v-for="(item) in shelfList"
        :key="item.id" // 修改了这里
      >
        ......
      </div>
</transition-group>

只是把:key由原先的index修改为了item.id，我也不知道什么原因

官网中关于key的说明：内部元素总是需要提供唯一的 key attribute 值 index不唯一吗？

搜到了一个比较靠谱的答案：

交换位置后(对应到我的项目，就是删除某个)，元素的key发生了变化

解决：给key值设置一个不会因为位置变化而变化的值