vue如何進(jìn)行列表渲染

現(xiàn)在有需求要進(jìn)行動(dòng)畫的了列表渲染。
但是在寫的過(guò)程中發(fā)現(xiàn)了問(wèn)題，不知如何解決

現(xiàn)有父組件，通過(guò)socket不停地獲取服務(wù)端傳遞過(guò)來(lái)的值，放入了數(shù)組中，然后將這個(gè)數(shù)組傳遞給子組件

          socket.onmessage = (event) => {
            const socketData = JSON.parse(event.data)
            if (socketData.type === 'wz') {
              this.wzSocket = socketData.data
            } else if (socketData.type === 'warn') {
              this.warningSocket.unshift(socketData.data)
            }
          }

這里采用的unshift 總是希望第一個(gè)進(jìn)入數(shù)組的值出現(xiàn)動(dòng)態(tài)效果。

子組件 對(duì)傳遞過(guò)來(lái)的數(shù)組進(jìn)行列表過(guò)渡，但是發(fā)現(xiàn)如果key填入了item這個(gè)對(duì)象，后臺(tái)是會(huì)提報(bào)錯(cuò)，key重復(fù)，以及不可以使用object來(lái)作為key,建議件采用string或者number。
所以這邊改成了index。

      <transition-group name="list" tag="span">
        <div v-for="(item,index) in warningData" :key="index" class="list-item">
          {{item.recordtime}} +{{index}}
          <el-button type="text" size="mini" @click="handleClickDetails(item)">詳情</el-button>
        </div>
      </transition-group>

現(xiàn)有效果：

渲染出來(lái)之后，如果key填入的是item對(duì)象，那么總是列表的第一個(gè)出現(xiàn)動(dòng)畫效果，但是填入了index，就是依次出現(xiàn)動(dòng)畫效果。如果使用方法去動(dòng)態(tài)生成key。那么所有的都會(huì)出現(xiàn)動(dòng)畫效果。

那么請(qǐng)問(wèn)，怎么才能總是使得數(shù)組的第一個(gè)元素出現(xiàn)動(dòng)態(tài)效果