Вызывает ли вызов функций в шаблонах проблемы с производительностью в 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()" .... >   

Answer 1

Имеется: когда вы используете переменную, обнаружение изменений помещает наблюдение за переменной, а механизм обновления срабатывает только при изменении этой переменной.

Когда вы используете что-то более сложное, например, вызов метода, нет другого способа, кроме оценки выражения в каждом цикле обнаружения изменений и обновления.

Таким образом, вы всегда гарантируете одинаковую или (намного) лучшую производительность с переменной, а не с вызовом функции. Все зависит от того, сильно ли изменяется ваша переменная или нет по сравнению с количеством циклов обнаружения изменений.

Вы можете найти хорошую ссылку в этом сообщении в блоге , чтобы погрузиться во внутренние механизмы механизма обнаружения изменений, и здесь обсуждение с примерами по вашему конкретному вопросу.

Редактировать после @ enno.void комментария :

Вместо этого вы можете использовать пользовательский канал во многих ситуациях, например, на этой странице приведен .

Answer 2

первый метод возможен до тех пор, пока вы вызываете строку ... и функция должна быть внутри вкладки mat следующим образом:

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

я не думаю, что последний будет дажеработать на всех ... вызов функции в * ngIf приведет к ошибке

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