v-for结构间的差异

Question

有人能解释一下2 v-for结构之间的区别是什么吗？

​

<li v-for="item in items" :key="item">
</li>

​

和

​

<li v-for="(item, i) in items" :key="i">
</li>

​

Answer 1

Vue要求v-for中的所有项目都是“键编辑”的。键用于唯一标识每个元素。这并不意味着如果不使用key，Vue就会崩溃。它将警告它可能无法检测到所有的更改。

“键”对Vue特别有用和重要，因为它允许它跳过未更改的重呈现项。

当在呈现的集合中检测到重复的键时，Vue将发出警告。

另一个Vue建议是“key”是原语 (strings或numbers)。当您指定非原始键时，Vue将再次发出警告。

提供上述所有建议时，当呈现一个唯一原语数组时，将使用

<div v-for="item in items" :key="item" />

...is完全可以接受，因为它满足了需求:每个键都是原始的和唯一的。

因此，如果您更改项目的顺序，Vue将能够重用现有的DOM元素并执行任何移动转换(如果您指定了任何)。测试这真的很有趣。以这个例子为例，摘自Vue文档。打开它，使用开发工具将呈现的项的color更改为red。然后单击洗牌按钮。您将看到Vue -重新使用该元素，并且您的自定义更改将被保留，因为项目将被移动。

当您处理非原语集合或非唯一原语集合时，Vue仍然希望您为每个项目提供唯一的原语键。理想情况下，您应该有一个唯一的标识符(例如：item.id)。这是典型的解决方案，可以满足所有需求。

有时，每个项上没有唯一的标识符，一个简单的解决方案是将项在数组中的位置用作标识符(key)：

<div v-for="(item, index) in items" :key="index" />

但是，请记住，这可能会成为问题，特别是在您在项目呈现后更改顺序并期望Vue对此更改作出反应的情况下。不会的！因为Vue只看钥匙。当你交换物品时，钥匙不会改变。只有值才行，所以Vue不会重新呈现。

这里的官方文件：

• Vue2列表呈现：https://v2.vuejs.org/v2/guide/list.html
• Vue3列表呈现：https://vuejs.org/guide/essentials/list.html#list-rendering

作为呈现时有用和功能强大的键的一个例子，请看一下这个虚拟滚筒。

打开dev工具，检查任何单元格，然后滚动，同时保持devtools打开。您将注意到，只有在行和列发生更改时才会更新它们(每个元素在更新时都会迅速闪烁)。

如果您查看代码，您会发现键是动态的。因此，您希望rows中的第一个rows总是在rows中呈现第一个对象的内容，并在另一个对象在数组中占据第一个位置时交换内容。

多亏了这些键，Vue在整个屏幕过程中保持了相同的<div>，并且只在离开滚动窗口之后才丢弃它。当您向上滚动时，新的<div>将被添加到父级，而当您向下滚动时，新的<div>将被附加，而顶部的则被丢弃。

这允许滚动100 k行(以及10亿个单元格)顺利地滚动(在理论上是这样的；在实践中--我们只呈现屏幕所能容纳的+1行+1额外列的单元格)。

Answer 2

在第一种情况下，v-for遍历items的所有元素。它将:key分配给项目本身。如果items中有重复的元素，这并不理想，因为每个:key都应该是唯一的。

在第二种情况下，v也迭代items的所有元素，但是它引入了另一个名为i的变量，它在items中表示item的数值索引。然后将此索引分配给:key。这样做更好，因为索引不能重复。

Answer 3

因为:key属性的目的是给出a hint for Vue virtual DOM algorithm about change detection happen。本质上，它可以帮助Vue识别哪些已经改变，哪些没有改变。

为了更好地理解它，我添加了两个场景( )的用法

• :key="item" -如果项具有唯一的价值。这样，每个迭代元素都将被分配给唯一的键。

• :key="index" -如果项没有唯一的价值。因此，要为我们使用index的每个迭代元素分配唯一密钥。