javascript - vue js中v-for中的track-by或key有什么用？

Question

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

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

Answer 1

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

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

<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>

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

字面意思是one的 most普通 fixes至 issues在 StackOverflow 上弹出。键不仅对列表呈现有用。通常，如果您在 Vue 中看到一些有趣的事情发生，其中某些事情似乎没有按照您期望的方式更新，则使用 key 可以解决问题。

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

• 使用 key lists .
• 迭代时必填key components .
• key 的 API 文档.