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

關於Vue.js的v-for，key的順序改變，影響過渡動畫表現關於Vue.js的v-for，key的取值，影響過渡動畫表現這個問題是在寫Message組件出現的，先看代碼部分：子組件：

<transition :name="transitionName" @enter="enter" @leave="leave">  . ..</transition><script>  export default {    methods: {      enter(e) {        e.style.height = e.scrollHeight + "px";      },      leave(e) {        e.style.height = 0;      },    },  };</script><style>  transition: all 0.2s ease-in-out;</style>
父組件：
<notice v-for="(item, index) in notices" :key="index">  .</notice>JS：data() {    return {      notices: []    };  },    setTimeout(() => {    let index = 0     this.notices.splice(index, 1);  }, time) 
理論上當某一個子組件被移除時，他會有一個流暢的高度從1到0到過度動畫，但是不然，每次移除時，動畫每次只會應用到最後一個。百思不解，各種js，css實現都不是很理想。依然一卡一卡的。 又去官網把文檔翻了一遍。找出了問題所在。for遍歷的時候，有一個值很重要：key當key取值為Number時，每次數組被改變，dom會重新渲染，所以動畫每次只會影響最後一個。當key取值為String時，每次數組被改變，dom則默認用「就地復用」策略所以把key改為String時，則就是我想要當結果，流暢的依次性的執行了動畫，完美官網的例子https://cn.vuejs.org/v2/guide/list.html#key這裡需要注意的是，key的取值為String／Number，所以測試時key值為了避免不重複，應該取值為隨機的不重複string/number, 不要使用默認的index 。