關於Vue.js的v-for，key的順序改變，影響過渡動畫表現

昨天寫Vue遇到個問題...代碼以下
html

<div id="list-demo" class="demo">
  <transition-group name="itemlist" tag="div">
    <div class="list-item" v-for="(item,index) in noteContent" :key="index" class="list-item" @click="click(index)">
      {{ item }}
    </div>
  </transition-group>
</div>

javascript

new Vue({
  el: '#list-demo',
  data: {
    noteContent: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    click: function(index) {
      this.noteContent.splice(index, 1);
    }
  }
})

css

.itemlist-enter-active,
.itemlist-leave-active {
  transition: all 1s;
}

.itemlist-enter,
.itemlist-leave-active {
  opacity: 0;
}

能夠把代碼複製到jsfiddle運行，這樣寫出來的fadeout動畫永遠做用於最後一個元素而不是被點擊元素
關鍵在於這句

<div class="list-item" v-for="(item,index) in noteContent" :key="index" class="list-item" @click="click(index)">

https://cn.vuejs.org/v2/guide...
當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 「就地複用」 策略。若是數據項的順序被改變，Vue將不是移動 DOM 元素來匹配數據項的順序， 而是簡單複用此處每一個元素，而且確保它在特定索引下顯示已被渲染過的每一個元素。

若是用index當key，v-for會從新渲染（可是不知道爲何動畫必定做用於最後一個元素），因此，請保持key的惟一性，並且！不能改變！
雖然看着好像渲染出來很佔位置，可是也只能這樣了？

<div class="list-item" v-for="(item,index) in noteContent" :key="item" class="list-item" @click="click(index)">