VueJS过渡组取决于密钥

时间:2018-11-07 17:31:55

标签: vue.js

所以我要在数组中加数字。

在一定的超时后,将拼接数组中的第一项,并应用请假过渡。但是,过渡将应用于数组中的最后一项。

我已经设法通过简单地将密钥更改为其他方式来解决此问题: :key="item"。进行此更改后,现在可以将假过渡正确地应用于已拼接的元素,第一个。

这是jsfiddle,因此您可以对其进行测试:https://jsfiddle.net/k375qyfr/2/

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

1 个答案:

答案 0 :(得分:1)

  

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

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

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