检查属性与检查函数的返回值的性能如何？

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>

现在我在某个地方读到这是个坏主意，将函数调用作为角度周期性地进行评估会调用它们来检测变化，如下所示：

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

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

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

是真的吗?它会像我目前使用它的方式那样降低性能吗？应该向添加到Set或从该中移除的每个项添加属性吗？

Answer 1

每当执行角度变化检测时，它都会检查模板中的变量是否发生了变化。

现在，在模型变量的情况下，检查是非常直接的，因为角可以简单地读取它们的值，以检查是否有变化。

但函数的情况并不是这样。对于函数，角只能通过调用函数本身来确定变量是否发生了变化。

现在，如果函数是值的一行返回，就不会有太大的区别了。

但是，如果该函数具有复杂的逻辑，它将在本质上扼杀所有的性能。每当变化检测周期运行时，角将调用该函数，以检查和检测变化。

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

注意:我还写了一个关于这个的Medium Article。我建议你去看看。它主要是关于角反应形式的性能。但它会帮助你更好地理解我上面说的话。