angular - 在模板中调用函数会导致 Angular2+ 中的性能问题吗？

Question

我还在习惯 Angular 的变更检测实现，我不清楚在模板中调用函数是否会导致性能问题。

例如，执行以下操作是否更糟糕：

<mat-tab-group>
  <mat-tab label="First"> {{ getFirstTab() }} </mat-tab>
  <mat-tab label="Second"> {{ getSecondTab() }} </mat-tab>
</mat-tab-group>

比做：

<mat-tab-group>
  <mat-tab label="First"> {{ firstTabContent }}</mat-tab>
  <mat-tab label="Second"> {{ secondTabContent }}</mat-tab>
</mat-tab-group>

关于什么：

<button *ngIf="shouldShowButton()" .... >   

标签： angularangular2-template

Answer 1

确实如此：当您使用变量时，更改检测会监视该变量，并且仅当该变量更改时才会触发更新机制。

当您使用更复杂的东西（例如方法调用）时，除了在每个更改检测周期和更新时评估表达式之外别无他法。

因此，您始终可以保证使用变量而不是函数调用具有相同或（好得多）的性能。这完全取决于与更改检测周期的数量相比，您的变量是否发生了很大变化。

您可以在此博客文章中找到一个很好的参考资料，以深入了解更改检测机制的内部结构，并在此处讨论有关您的特定问题的示例。

在@enno.void 评论后编辑：

在许多情况下，您可以使用自定义管道代替，此页面上给出了示例。