vue如何进行列表渲染

Question

现在有需求要进行动画的了列表渲染。但是在写的过程中发现了问题，不知如何解决现有父组件，通过socket不停地获取服务端传递过来的值，放入了数组中，然后将这个数组传递给子组件          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 总是希望第一个进入数组的值出现动态效果。子组件 对传递过来的数组进行列表过渡，但是发现如果key填入了item这个对象，后台是会提报错，key重复，以及不可以使用object来作为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>那么请问，怎么才能总是使得数组的第一个元素出现动态效果

Answer 1

你的问题是：怎么才能总是使得数组的第一个元素出现动态效果？

可以试试把数组第一个取出来 放到<transition></transition> 里
然后把其他数据放到正常div中循环渲染

<transition-group></transition-group> 是列表渲染

Answer 2

这种情况先仔细看文档 key，在 Vue 列表里面，key 被用来标识每个渲染出来的元素哪个是哪个。在 JS Object 里，不能拿对象做键名，所以你用 object 就会报错。但是你拿 index 做 key 的话，那么每次 unshift 新元素自然就影响所有元素的index，那么全部重新开始动画就很正常了。

应该用 id 或者自己生成一个 id 给 key。