javascript - 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 中的所有项目成为“关键-ed”。键用于唯一标识每个元素。这并不意味着如果你不使用 key，Vue 就会崩溃。 .它会警告它可能无法检测到所有更改。

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

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

Vue 的另一个建议是“key”是原始类型(string 或number s)。当您指定非原始键时，Vue 将再次发出警告。

鉴于上述所有建议，在渲染一组独特的图元时，使用

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

...完全可以接受，因为它满足要求:每个 key 都是原始且唯一的。

因此，如果您更改项目的顺序，Vue 将能够重新使用现有的 DOM 元素并执行任何移动转换(如果您指定的话)。测试这个其实很有趣。考虑 this example ，取自 Vue 文档。打开它并使用开发工具更改任何渲染项目的 color至 red .然后单击随机播放按钮。随着项目的移动，您会看到 Vue 重新使用该元素并保留您的自定义更改。

---

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

有时，您没有每个项目的唯一标识符，一个简单的解决方案是只使用项目在数组中的位置作为标识符(键):

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

但是，请记住这可能会带来问题，尤其是在项目渲染后更改项目顺序并希望 Vue 对此更改使用react的情况下。不会的!因为 Vue 只看键。当您交换项目时， key 不会改变。只有值会，所以 Vue 不会重新渲染。

官方文档在这里:

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

---

作为渲染时键的有用和强大的示例，请查看 this virtual scroller .
打开开发工具，检查任何单元格然后滚动，同时保持开发工具打开。您会注意到行和列只有在更改时才会更新(每个元素在更新时都会快速闪烁)。
如果你查看 the code ，您会注意到键是动态的。所以你会期待第一个 <div>在 rows始终呈现 rows 中第一个对象的内容并在另一个对象在数组中排在首位时交换内容。
多亏了键，Vue 保持不变 <div>在它穿过屏幕的整个过程中，只有在它离开滚动窗口后才会丢弃它。向上滚动时，新的 <div> s 被添加到 parent 之前，当您向下滚动新的 <div> 时s 被附加，而顶部的被丢弃。
这允许平滑地滚动 10 万行(和 10 亿个单元格)(好吧，只是在理论上；在实践中 - 我们只渲染屏幕可以容纳的单元格 + 1 个额外的行 + 1 个额外的列)。