当集合发生变化时,ng-repeat是否会保留DOM元素或创建所有新元素？

Question

我已经看到很多关于ng-repeat完成的顺序与其他指令或Angular上发生的事情相比的问题,但是我还没有找到答案来确定它是如何完成的.

我有两个关于它如何工作的想法.

第一种方式: 当ng-repeat的观察者触发时,它会删除它从DOM创建的所有元素,然后在它们的位置创建所有新元素,即使这些元素中的许多元素是相同的(例如,在支持数组中添加了1个项目的情况) ).

第二种方式:由于ng-repeat已经跟踪哪些元素与其后备集合中的哪些项目相关,因此它只删除集合中不再存在的项目,并为集合中新增的项目创建新元素.

这是为什么？为什么？

Answer 1

这是第二种方式: Angular 试图聪明地创建/删除DOM元素:

该ngRepeat指令提供了一种在给定模板的情况下呈现项集合的方法.为此,AngularJS编译给定的模板,然后为集合中的每个唯一项克隆它.由于Controller对集合进行了变更,AngularJS会根据需要添加,删除和更新相关的DOM元素.

但是,AngularJS如何知道何时执行哪些操作？如果你开始测试渲染,你会发现AngularJS不会强行创建DOM; 也就是说,它不会为每次渲染重新创建DOM.相反,它只在一个全新的项目被引入集合时才创建一个新的DOM元素.如果现有项已更新,AngularJS仅更新相关的DOM属性,而不是创建新的DOM节点.

这仍然会不必要地影响性能,即在集合中传递元素按值时(在上面链接的博客文章中有一个很好的例子).这就是为什么Angular从版本1.2开始支持ngRepeat的"跟踪":这是一种帮助Angular决定何时创建DOM的方法:

有了这种关联,AngularJS就不会破坏并不必要地重新创建DOM节点.这可以带来巨大的性能和用户体验优势.

官方文件说明:

您还可以提供可选的跟踪功能,该功能可用于将集合中的对象与DOM元素相关联.如果未指定跟踪功能,则ng-repeat按集合中的标识关联元素.

例如:item in items track by item.id是项目来自数据库时的典型模式.在这种情况下,对象标识无关紧要.只要两个对象的id属性相同,它们就被认为是等价的.