在Vue js中使用track-by或key in v-for有什么用?

Pri*_*hra 4 javascript vuejs2

我是javascript和javascript框架世界的新手.什么是实际使用track-by还是keyv-for在Vue公司JS?

我阅读了文档,但并没有真正理解它的用法.

Ber*_*ert 8

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

下面是一个典型的例子,从一个问题,我在几个星期前回答.小提琴显示了在不使用键的情况下对组件的迭代.

<li v-for="item in items">
  <test-component :prop1="item"></test-component>
</li>
Run Code Online (Sandbox Code Playgroud)

请注意,单击更改数据按钮时,属性值(第一个列表)会更改,但组件的内部状态(第二个列表)不会更改.这通常意味着您不会看到更新或看到在Vue中似乎没有更新的内容.

但是,通过向组件添加密钥,您告诉Vue每个组件都有一个特定的ID,如果它具有相同的ID,Vue将只重用该组件.这可以防止通常出现的许多奇怪行为.这是同样的小提琴更新.

<li v-for="item in items" :key="item">
  <test-component :prop1="item"></test-component>
</li>
Run Code Online (Sandbox Code Playgroud)

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

这是字面上一个中的常见的修复的问题,在这里弹出在计算器上.键不仅对列表呈现有用.一般来说,如果你在Vue看到一些有趣的东西似乎没有按照你期望的方式更新,那么使用密钥将解决问题.

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