何时不在 AngularJS ng-repeat 中使用“按 $index 跟踪”？

Question

我最近收到控制台错误`

错误：[ngRepeat:dupes] 不允许在转发器中重复。 使用“track by”表达式来指定唯一键...

— AngularJS 错误参考 - ngRepeat:dupes

然后我使用了'track by $index' ，问题就解决了......

但这让我开始思考……您是否有理由不想在 ng-repeat 中使用track by $index ？

我已经阅读过类似这样的问题以及其他文章，但似乎几乎所有文章都只讨论了使用'track by'的优点。

有人可以列出缺点并举例说明何时不想使用track by $index吗？

Answer 1

它有一个disadvantage ，

'track by'表达式按数组中的索引进行跟踪。 这意味着只要索引保持不变，angularjs 就会认为它是同一个对象。

所以如果你替换数组中的任何对象，angularjs 认为它​​没有改变，因为数组中的索引仍然相同。 因此，更改检测不会在您期望的时候触发。

看看这个example

尝试更改名称，没有任何反应。 按索引删除轨道，它有效。 按 item.name 添加轨道，它仍然有效。

Answer 2

避免track by $index原因有很多

• 使用一次性绑定时避免使用track by $index
• 当存在唯一的属性标识符时，避免track by $index
• track by $index问题的其他示例

---

使用一次性绑定时避免使用track by $index

该文档特别指出在使用一次性绑定时应避免track by $index进行track by $index 。

从文档：

当重复模板包含一次性绑定时，避免使用track by $index 。 在这种情况下，第nth DOM 元素将始终与数组的nth项目匹配，因此即使相应项目发生更改，该元素上的绑定也不会更新，从而导致视图与基础数据。

— AngularJS ng-repeat 参考 - 跟踪和重复

---

当存在唯一的属性标识符时，避免track by $index

当有一个唯一的属性标识符可以使用时，避免track by $index 。 当处理所有唯一的对象时，最好让ng-repeat使用它自己的跟踪，而不是track by $index覆盖track by $index 。

从文档：

如果您正在使用具有唯一标识符属性的对象，则应通过此标识符而不是对象实例进行跟踪。 如果您稍后重新加载数据， ngRepeat将不必为它已经呈现的项目重建 DOM 元素，即使集合中的 JavaScript 对象已被新对象替换。 对于大型集合，这显着提高了渲染性能。

— AngularJS ng-repeat 指令 API 参考 - 跟踪

---

track by $index问题的其他示例

在对象数组中添加和删除对象时，我也遇到过问题。

• 使用 Angular UI Carousel 按 $index 跟踪的问题
• Ng-Repeat 显示一次绑定的不规则行为
• Angular：使用 ng-repeat 时，用新数据更新 $scope 会导致旧数据保留
• AngularJS 问题和 Select 绑定未加载默认值