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。