在做項目時遇到碰到此問題，截取部分代碼記錄如下：
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。