Производительность Angular 2: лучше ли связываться с элементом данных, чем с функцией?

Question

Я хотел иметь некоторое представление о том, лучше ли привязка к элементу данных по производительности по сравнению с привязкой к функции?

Например, какое из приведенных ниже утверждений будет иметь лучшую производительность?

1)

<myComp *ngIf="isThisTrue"></mycomp>

где isThisTrue устанавливается с помощью метода

checkIfTrue(data){
       this.isThisTrue = data;
}

где этот checkfTrue() вызывается при получении события от наблюдаемой.

или же

2)

<mycomp *ngIf="seeIfItHasBecomeTrue()"></mycomp>

где seeIfItHasBecomeTrue проверяет, стал ли this.isTrue истинным или нет.

Я ясно чувствую, что привязка к элементу данных должна быть быстрее, но я не уверен, что это всегда будет быстрее? или если есть какие-то серые зоны? Кроме того, если это быстрее, то сколько?

Answer 1

Если вы используете подход *ngIf="isThisTrue" компилятор сгенерирует следующее updateRenderer функция:

function (_ck, _v) {
    var _co = _v.component;
    var currVal_1 = _co.isThisTrue;   <--- simple member access
    _ck(_v, 5, 0, currVal_1);
}

Если вы используете второй подход *ngIf="seeIfItHasBecomeTrue()", функция будет выглядеть так:

function(_ck,_v) {
    var _co = _v.component;
    var currVal_1 = _co.seeIfItHasBecomeTrue();   <--- function call
    _ck(_v,5,0,currVal_1);
}

И вызов функции требует большей производительности, чем простой доступ к элементам.

Чтобы узнать больше о updateRenderer функция читать:

• Механика обновлений DOM в Angular