当集合更改时，ng-repeat 是保留 DOM 元素还是创建所有新元素? [英] Does ng-repeat retain DOM elements or create all new ones when the collection changes?

问题描述

我已经看到了很多关于 ng-repeat 与其他指令或在 Angular 领域中发生的事情相比的完成顺序的问题，但我一直无法找到它究竟是如何实现这一点的答案.

I've seen a lot of questions about the order in which ng-repeat finishes compared to other directives or things going on in Angular land, but I haven't been able to find an answer to how exactly it accomplishes this.

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

I have two ideas of how it could work.

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

First Way: When ng-repeat's watcher triggers, it removes all elements it created from the DOM then creates all new elements in their place, even if many of those elements are the same (e.g. in the case of 1 item added to the backing array).

第二种方式: 由于 ng-repeat 已经跟踪了哪些元素与它的支持集合中的哪些项对应，它只是删除集合中不再存在的项并为项创建新元素新的集合.

Second way: Since ng-repeat already keeps track of which elements go with which items in its backing collection, it simply removes the items that no longer exist in the collection and creates new elements for items that are new to the collection.

它是什么，为什么?

Which is it and why?

推荐答案

这是第二种方式: Angular 尝试巧妙地创建/删除 DOM 元素:

It's the second way: Angular tries to be smart about creating/removing DOM elements:

ngRepeat 指令提供了一种在给定模板的情况下呈现项目集合的方法.为此，AngularJS 编译给定的模板，然后为集合中的每个唯一项目克隆它.当集合被控制器改变时，AngularJS 会根据需要添加、删除和更新相关的 DOM 元素.

The ngRepeat directive provides a way to render a collection of items given a template. To do this, AngularJS compiles the given template and then clones it for each unique item in the collection. As the collection is mutated by the Controller, AngularJS adds, removes, and updates the relevant DOM elements as needed.

但是，AngularJS 如何知道什么时候执行哪些操作?如果你开始测试渲染，你会发现 AngularJS 并没有蛮力创建 DOM；也就是说，它不会为每次渲染重新创建 DOM.相反，它只在一个全新的项目被引入到集合中时才创建一个新的 DOM 元素.如果现有项目已更新，AngularJS 只会更新相关的 DOM 属性，而不是创建新的 DOM 节点.

But, how does AngularJS know which actions to perform when? If you start to test the rendering, you'll discover that AngularJS doesn't brute force DOM creation; that is, it doesn't recreate the DOM for every rendering. Instead, it only creates a new DOM element when a completely new item has been introduced to the collection. If an existing item has been updated, AngularJS merely updates the relevant DOM properties rather than creating a new DOM node.

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

This can still impact performance unnecessarily, i.e. when passing elements by-value in a collection (there's an excellent example of this in the blog post linked above). That's why Angular supports "track by" for ngRepeat since version 1.2: It's a way to help Angular decide when DOM creation is necessary:

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

With this association in place, AngularJS will not $destroy and re-create DOM nodes unnecessarily. This can have a huge performance and user experience benefit.

官方文档状态:

您还可以提供一个可选的跟踪功能，该功能可用于将集合中的对象与 DOM 元素相关联.如果没有指定跟踪函数，ng-repeat 将通过集合中的标识关联元素.

You can also provide an optional tracking function which can be used to associate the objects in the collection with the DOM elements. If no tracking function is specified the ng-repeat associates elements by identity in the collection.

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

For example: item in items track by item.id is a typical pattern when the items come from the database. In this case the object identity does not matter. Two objects are considered equivalent as long as their id property is same.

这篇关于当集合更改时，ng-repeat 是保留 DOM 元素还是创建所有新元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！