关于Vue.js的v-for，key的顺序改变，影响过渡动画表现

这个问题是在写Message组件出现的，先看代码部分

子组件：

#Notice：
    
         ........
    #JS:methods: {    enter(e) {      e.style.height = e.scrollHeight + "px";    },    leave(e) {      e.style.height = 0;    }  }#CSS:transition: all .2s ease-in-out;

父组件：

    
       ......
    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 时，则就是我想要当结果，流畅的依次性的执行了动画，完美

官网的例子

这里需要注意的是，key的取值为String／Number，所以测试时key值为了避免不重复，应该取值为随机的不重复 string

[完]