如果你是想看怎么做?那么你能够间接去看我之前写的 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 没有被移除
弹幕逻辑
- 一秒 push 一条数据。
- 五条通道循环
- 动画 7s,animationend 事件移除第一个
剖析问题
-
第一步,咱们先排查逻辑,看看是否因为移除的时候不对,造成了数据错乱。能够看到咱们是 shift,基于咱们的 定长动画,必定是第一个先执行实现。
animationend(){this.list.push(this.bulletlist.shift()) },
.bullet-animation{animation: right2left 7s linear both;}
- 通过咱们的察看,像是动画忽然换行,并且后退了 。而后咱们关上控制台间接查看 DOM, 发现是所有的内容扭转,并不是 DOM 节点扭转。
-
到了这个咱们能够剖析出了问题,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
- 通过下面的文档,咱们能够看到,提供一个正当的 key 就能够强制渲染 DOM,能够触发过渡。那么咱们就查看一下 key 设置的什么呢?
:key="idx"
看来咱们找到了问题,因为 idx 和 item 其实没有固定的对应关系的,所以 DOM 被复用了,应该应用:key="item.id"
总结
让咱们 遇事不决,量子力学 一哈。
- 在 Vue 中应用 v-for 应该搭配一个 :key 来应用。
- :key 须要是一个惟一值,比方 id。最好不要用 index。
- 如果须要强制更新 DOM,咱们能够应用 :key 来通知 Vue 引擎这是两个不同的元素。
类似问题
有的人可能会说,为什么我也用了下标为什么没有报错呢?
其实还有挺多类似问题的,外围点就是有没有进行过批改
- 比如说有排序挪动,如果没有提供一个正当的 key,那么就会乱套
- 两个构造类似,然而没有应用 v-for,切换暗藏显示的时候。
微信公众号:前端 linong