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

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

子組件：

#Notice：

<transition :name="transitionName"  @enter="enter" @leave="leave">
    ........
</transition>
#JS:
methods: {
    enter(e) {
      e.style.height = e.scrollHeight + "px";
    },
    leave(e) {
      e.style.height = 0;
    }
  }

#CSS:
transition: all .2s ease-in-out;

父組件：

<notice v-for="(item,index) in notices" :key="index">
  ......
</notice>
JS：
data() {
    return {
      notices: []
    };
  },
......
#notices 新增的時候自動加入定時器來移除

setTimeout(()=>{
   let index = 0 //這里假設我已經取得了移除的 index索引,可能不是依次的123456
   this.notices.splice(index, 1);
},time) //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

[完]