Vue js 中 v-for 中的 track-by 或 key 有什么用？答案

【问题标题】：What is the use of track-by or key in v-for in Vue js?Vue js 中 v-for 中的 track-by 或 key 有什么用？
【发布时间】：2017-10-20 00:19:00
【问题描述】：

我是 javascript 和 javascript-frameworks 世界的新手。 Vue JS 中v-for 中的track-by 或key 的实际用途是什么？

我阅读了文档，但并没有真正理解它的用途。

【问题讨论】：

在 Vue 中是 key。 track-by 在文档中用作 Angular 的示例。你有什么特别不明白的地方？
@BertEvans 没看懂key的实际使用。我认为它是Vue 1 中的track-by，并已重命名为Vue 2 中的key。为什么以及在哪里使用它？？

标签： javascript vuejs2

【解决方案1】：

一般来说，我建议您在每次使用v-for 时使用key。主要原因是 Vue 出于性能原因，尝试变得聪明，并在重新渲染时重用现有组件。这可能会导致您遇到问题，尤其是在组件方面，因为组件具有内部状态。如果组件没有注意其属性的变化，那么它将以其先前的内部状态呈现，并且看起来好像显示的信息没有正确更新。

Here is a prime example 来自a question I answered a few weeks ago。小提琴显示了在不使用键的情况下对组件的迭代。

<li v-for="item in items">
  <test-component :prop1="item"></test-component>
</li>

请注意，当您单击更改数据按钮时，属性值（第一个列表）会发生变化，但组件的内部状态（第二个列表）不会改变。这通常意味着您不会看到更新，或者会看到在 Vue 中似乎没有更新的内容。

然而，通过向组件添加一个键，你是在告诉 Vue 每个组件都有一个特定的 ID，并且 Vue 只会在它具有相同 ID 的情况下重用该组件。这可以防止许多通常出现的奇怪行为。 Here is that same fiddle updated.

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

现在当您单击更改数据按钮时，您会注意到内部状态始终与属性匹配。

这实际上是 StackOverflow 上弹出的 most 常见的 fixes 到 issues 中的 one。键不仅对列表渲染有用。通常，如果您在 Vue 中看到一些有趣的事情，并且某些事情似乎没有按照您期望的方式更新，那么使用密钥可以解决问题。

以下是文档中有关密钥的一些相关信息。

将密钥与lists 结合使用。
迭代 components 时必须使用密钥。
key 的 API 文档。

【讨论】：

感谢您的解释，我有一个关于 Vue 处理这种情况的问题。我知道默认行为是按索引跟踪，所以当我们点击排序数据时，例如 Vue 会看到列表仍然有 3 个列表项并重用它们，但是如果它正在重用它，为什么 prop 值又与组件更新但数据没有更新？
知道这个键的范围是什么吗？例如，如果有两个 v-for 循环，一个在另一个内部，第三个在外部，那么所有这些键是否应该在全局级别上是唯一的，还是让它们对它们的父级来说是唯一的就足够了？
@GopalakrishnaPalem 键的作用域是当前组件，所以组件内部唯一就可以了。