想看怎么办？然后就可以直接进入我之前写的vue实现弹幕效果了。就在这段时间，内部正在移除通用组件。运营小姐姐最近迷上了悬浮屏功能，各种活动都要有悬浮屏才能停下来。然后安排人被分成组件。结果这个组件绊倒了同一个位置的两个人，今天就来分析一下。复现BUGBUG重现地址：https://www.lilnong.top/static/html/vue-bug-bullet.1.htmlBUG修复地址：https://www.lilnong.top/static/html/vue-bug-bullet.2.htmlBUG对比地址：https://www.lilnong.top/static/html/vue-bug-bullet.3.html可以直接查看对比地址，会发现左边的动画闪烁异常,并且没有DOM去掉弹幕逻辑每秒推送一条数据。五通道循环动画7s，移除animationend事件。首先分析问题是第一步。我们先排查一下逻辑，看看是不是因为删除时间错误导致数据乱序。可以看出我们是shift，根据我们的定长动画，肯定是最先执行完的。animationend(){this.list.push(this.bulletlist.shift())},.bullet-animation{animation:right2left7slinearboth;}经过我们的观察，似乎动画突然回绕并向前移动。然后我们打开控制台直接查看DOM，发现所有的内容都变了，不是DOM节点。至此，我们就可以分析出问题了，DOM已经被复用了，因为动画是应用到DOM上的，当前DOM动画已经完成了。那么Vue的DOM复用规则是什么呢？https://cn.vuejs.org/v2/guide/list.htmlVue在更新使用v-for渲染的元素列表时，默认使用“就地更新”策略。如果数据项的顺序发生变化，Vue不会移动DOM元素以匹配数据项的顺序，而是会更新每个元素并确保它们在每个索引位置正确呈现。https://cn.vuejs.org/v2/api/#key通过上面的文档我们可以看出，提供一个合理的key可以强制渲染DOM并触发transition。那么让我们检查一下关键设置是什么？:key="idx??"看来我们找到问题了，因为idx和item没有固定的对应关系，所以DOM被复用了，应该用:key="item.id"来总结一下让我们优柔寡断。量子力学啊哈。在Vue中使用v-for应该与:key一起使用。:key需要像id一样是唯一的值。最好不要使用索引。如果我们需要强制更新DOM，我们可以使用:key告诉Vue引擎这是两个不同的元素。有类似问题的人可能会说，我也用下标怎么不报错呢？其实类似的问题还有很多。核心点是有没有修改，比如排序，移动。如果不提供一个合理的key，那么两个相似的结构就会乱成一团，但是没有使用v-for，切换到hide和displaywhen。微信公众号：前端立农
