检查属性与检查函数的返回值的性能是什么？

Question

我有一个组件中的项目列表：

list: Array<MyType>;

用户可以在点击时选择和取消选择元素：

toggleItem(item: MyType) {
  if (this.selection.has(item)) {
    this.selection.delete(item);
    return;
  }

  this.selection.add(item);
}

所选项目存储在Set：

selected: Set<MyType> = new Set();

现在我需要切换一个 CSS 类和一个 title-attribute，这取决于一个元素是否被选中：

<button class="toggle"
        type="button"
        [ngClass]="{'selected': selection.has(item)}"
        [title]="selection.has(item) ? 'Select' : 'Deselect'"
        (click)="toggleItem(item)">
  {{ item.title }}
</button>

---

现在我在某处读到，评估函数调用是一个坏主意，因为 Angular 会定期调用它们进行更改检测，如下所示：

[ngClass]="{'selected': selection.has(item)}"

他们说最好检查变量或对象的成员，例如：

[ngClass]="{'selected': item.selected}"

这是真的，它是否会降低我目前使用它的方式的性能？我是否应该为在 Set 中添加或删除时设置的每个项目添加一个属性？

Answer 1

每当 Angular 执行更改检测时，它都会检查模板中的任何变量是否发生了更改。

现在，对于模型变量的检查非常简单，因为 Angular 可以简单地读取它们的值以检查更改。

但函数并非如此。对于函数，Angular 只能通过调用函数本身来判断变量是否发生了变化。

现在，如果该函数是一个值的单行返回，则没有太大区别。

但是如果函数有复杂的逻辑，它基本上会扼杀所有的性能。每次更改检测周期运行时，Angular 都会调用该函数以检查并检测更改。

因此，不建议在模板中使用数据绑定语法编写函数。

注意：我还为此写了Medium Article。我建议你检查一下。它主要是关于 Angular Reactive Forms 的性能。但它会帮助你更好地理解我上面所说的。