VueJS 转换组取决于键

Question

所以我将数字添加到数组中。

经过一定的超时时间后，数组中的第一项被拼接并应用离开转换。但是，转换正在应用于数组中的最后一项。

我已经设法通过简单地将密钥更改为其他内容来解决此问题： :key="item"。通过此更改，离开过渡现在可以正确应用于被拼接的元素，即第一个元素。

这里是 jsfiddle，你可以测试一下：https://jsfiddle.net/k375qyfr/2/

我想知道的是，为什么？两者有什么区别？

Answer 1

当 Vue 更新使用 v-for 渲染的元素列表时，通过 默认它使用“就地补丁”策略。如果数据的顺序 items 已更改，而不是移动 DOM 元素以匹配 项目的顺序，Vue 将就地修补每个元素并确保 它反映了应该在该特定索引处呈现的内容。这是 类似于 Vue 1.x 中 track-by="$index" 的行为。

https://vuejs.org/v2/guide/list.html

这就是为什么你应该使用:key="item"