关于javascript:前端-BUG-录-使用-VUE-做飘屏功能因为-key-设置错误造成异常动画

如果你是想看怎么做？那么你能够间接去看我之前写的 Vue 实现弹幕成果。

正好这段时间外部在 抽离罕用组件 ，经营小姐姐最近迷上了 飘屏 性能，各种流动都要有个飘屏才罢休。而后就安顿人抽离成组件了。
后果这个组件在 同一个地位绊倒了两个人，那么明天咱们来剖析一下。

复现 BUG

BUG 复现地址：https://www.lilnong.top/static/html/vue-bug-bullet.1.html
BUG 修复地址：https://www.lilnong.top/static/html/vue-bug-bullet.2.html
BUG 比照地址：https://www.lilnong.top/static/html/vue-bug-bullet.3.html

能够间接查看比照地址，会发现 右边的动画异样闪动 ， 而且 DOM 没有被移除

弹幕逻辑

1. 一秒 push 一条数据。
2. 五条通道循环
3. 动画 7s，animationend 事件移除第一个

剖析问题

1. 第一步，咱们先排查逻辑，看看是否因为移除的时候不对，造成了数据错乱。能够看到咱们是 shift，基于咱们的 定长动画，必定是第一个先执行实现。

   animationend(){this.list.push(this.bulletlist.shift())
   },

   .bullet-animation{animation: right2left 7s linear both;}

2. 通过咱们的察看，像是动画忽然换行，并且后退了 。而后咱们关上控制台间接查看 DOM， 发现是所有的内容扭转，并不是 DOM 节点扭转。
   

3. 到了这个咱们能够剖析出了问题，DOM 被复用了，因为动画是作用在 DOM 上的，以后 DOM 的动画曾经实现了。

   那么 Vue 的 DOM 复用规定是什么呢？

   https://cn.vuejs.org/v2/guide/list.html
   当 Vue 正在更新应用 v-for 渲染的元素列表时，它默认应用“就地更新”的策略。如果数据项的程序被扭转，Vue 将不会挪动 DOM 元素来匹配数据项的程序，而是就地更新每个元素，并且确保它们在每个索引地位正确渲染。

   https://cn.vuejs.org/v2/api/#key
   

4. 通过下面的文档，咱们能够看到，提供一个正当的 key 就能够强制渲染 DOM，能够触发过渡。那么咱们就查看一下 key 设置的什么呢？:key="idx"
   看来咱们找到了问题，因为 idx 和 item 其实没有固定的对应关系的，所以 DOM 被复用了，应该应用 :key="item.id"

总结

让咱们 遇事不决，量子力学 一哈。

1. 在 Vue 中应用 v-for 应该搭配一个 :key 来应用。
2. :key 须要是一个惟一值，比方 id。最好不要用 index。
3. 如果须要强制更新 DOM，咱们能够应用 :key 来通知 Vue 引擎这是两个不同的元素。

类似问题

有的人可能会说，为什么我也用了下标为什么没有报错呢？

其实还有挺多类似问题的，外围点就是有没有进行过批改

1. 比如说有排序挪动，如果没有提供一个正当的 key，那么就会乱套
2. 两个构造类似，然而没有应用 v-for，切换暗藏显示的时候。

微信公众号：前端 linong