Question

让我们假设我将一个大的嵌套对象绑定到代码中显示的视图的$ scope。现在，更新“e”对象的值。这将导致检查所有绑定的角度并更新DOM。如果我使用“track by”代替，在每个ng-repeat指令中，这是否意味着只有“e”对象的绑定会作出反应而“e”对象的dom会更新？

<div ng-repeat="a in b">
    <div ng-repeat="c in a">
        <div ng-repeat="d in c">
            <div ng-repeat="e in d">
                   {{e.value}}<br>
            </div>
        </div>
    </div>
</div>

Answer 1

无论如何都将检查绑定，并且每个摘要周期仅在不同时更新绑定。至于重新构建DOM元素，Angular使用唯一标识符来确定ng-repeat中的每个项目是否已经具有匹配的DOM元素，或者是否需要呈现新元素。

默认情况下，Angular使用每个对象的$id（或$$hashKey）创建并管理这些唯一标识符。

稍后添加了

track by，以此告诉Angular使用您选择的唯一标识符，而不是在引擎盖下管理它。

这在更新数据时有用，删除/更改$id或$$hashKey，触发每个DOM元素的不必要的重构，即使数据根本没有改变。

考虑这个例子：

您有一个显示数据记录的ngRepeat：

<li ng-repeat="item in data">{{item.value}}</li>
您使用服务DataService更新数据，该数据具有fetch()方法，可从SQL数据库中检索数据，并返回记录。
更新$scope中的数据涉及调用该服务，并将数据变量重新分配给结果：

$scope.data = DataService.fetch();

这意味着，即使只有一个项目不同，所有$id或$$hashKey属性都会消失或不同，Angular会假设所有项目都是新的。它将从头开始重新构建所有DOM元素。

但是，由于您的数据来自SQL数据库，因此您已拥有唯一标识符（主键），id列。然后，您可以将ngRepeat更改为：

<li ng-repeat="item in data track by item.id">{{item.value}}</li>

现在，Angular将使用您告诉它的属性（$$hashKey），而不是寻找每次重新分配数据时丢失的item.id。由于该属性在重新分配变量时仍然存在，因此该列表再次进行了优化，因为Angular只会为新的item重新构建DOM元素。

1 个答案: