arrays - ngFor 指令是否会在每次突变时重新渲染整个数组？

Question

假设我们有一组项目:

items = [
    { title: 'item 1'},
    { title: 'item 2'},
    /* ... */
];

还有一个模板可以渲染这个数组:

<ul>
    <li *ngFor="let item of items">{{item.title}}</li>
</ul>

如果我通过push/splice 添加/删除项目，angular2 会重新呈现整个数组，还是只会添加/删除相应项目的标记？如果它只更新，那么突变策略有什么不同——我应该更喜欢推送/拼接而不是数组替换吗？换句话说，这两种方法在渲染性能上是否等效:

/* 1: mutation */
this.items.push({ title: 'New Item' });

/* 2: replacement */
var newArray = this.items.slice();
newArray.push({ title: 'New Item' });

this.items = newArray;

Answer 1

除了 Gunter 的回答之外，如果您想知道您的 UI 的哪一部分被渲染/重新渲染，您可以使用 Chrome(甚至独立于任何库/框架):

• 打开调试面板
• 菜单(调试面板)/更多工具/渲染

然后您应该会看到以下面板:

打开 Paint Flashing 选项，让您的列表充满乐趣。
如果某个区域呈绿色闪烁，则表示它已被绘制(paint)/重新绘制(paint) 👍。

例如:如果您在 Gunter 的回答中使用 Plunkr:http://plnkr.co/edit/oNm5d4KwUjLpmmu4IM2K?p=preview并打开 Paint Flashing，向列表中添加一个项目，您会看到之前的项目不会闪烁。 (这意味着没有重绘)。