在做项目时遇到碰到此问题，截取部分代码记录如下：
transition-group.transition-group(type="animation" tag="div") .template( v-for="(tax, index) in form.taxList" :key="index" )
查阅相关资料得知：
transition-group的子元素上不应使用索引index作为key的值，否则相当于没有使用key,通过官方文档可知：
当 Vue.js 用v-for正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，
并且确保它在特定索引下显示已被渲染过的每个元素。
"就地复用"的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
举例说明：
<template>
<div v-for="(item, index) in list" :key="index" >{{item.name}}</div>
</template>
//list值
const list = [
{
id: 1,
name:
"Person1"
},
{
id: 2,
name:
"Person2"
},
{
id: 3,
name:
"Person3"
},
{
id:4,
name:
"Person4"
}
];
若中间删除一个list项
删除前：
| key | id | index | name |
| 0 | 1 | 0 | Person1 |
| 1 | 2 | 1 | Person2 |
| 2 | 3 | 2 | Person3 |
| 3 | 4 | 3 | Person4 |
删除Person2后：
| key | id | index | name |
| 0 | 1 | 0 | Person1 |
| 1 | 3 | 1 | Person3 |
| 2 | 4 | 2 | Person4 |
两表格对比可知：原index为1的name为Person2，删除后，index为1的name变为Person3,这就产生bug了，但如果使用唯一id作为key，删除 Person2 后，剩下的元素因为与 key 的关系没有发生变化，
都不会被重新渲染，从而达到提升性能的目的。此时，list 的 item 作为 select 的选项，也不会出现上面所描述的bug。