问题描述
我想知道绑定到数据成员是否比绑定到函数在性能上更好?
I wanted to have some idea about whether binding to data member is better in performance vs binding to a function?
例如以下哪个语句会具有更好的性能?
e.g. which of the below statement will have better performance?
1)
<myComp *ngIf="isThisTrue"></mycomp>
通过方法设置 isThisTrue 的位置
where isThisTrue is being set via a method
checkIfTrue(data){
this.isThisTrue = data;
}
在从 observable 接收事件时调用 checkfTrue() 的地方.
where this checkfTrue() is being called on receiving an event from an observable.
或
2)
<mycomp *ngIf="seeIfItHasBecomeTrue()"></mycomp>
where seeIfItHasBecomeTrue 检查 this.isTrue 是否为真.
where seeIfItHasBecomeTrue checks to see whether this.isTrue has become true or not.
我显然觉得绑定到数据成员应该更快，但我不确定这是否总是更快?或者是否有一些灰色区域?另外，如果它更快，那么要多少?
I clearly feel that binding to data member should be faster, but I am not sure if this will always be faster? or if there are some gray areas? Also, if it is faster then how much?
推荐答案
如果使用*ngIf="isThisTrue"方式，编译器会生成如下updateRenderer函数:
If you use the approach *ngIf="isThisTrue" the compiler will generate the following updateRenderer function:
function (_ck, _v) {
var _co = _v.component;
var currVal_1 = _co.isThisTrue; <--- simple member access
_ck(_v, 5, 0, currVal_1);
}
如果您使用第二种方法*ngIf="seeIfItHasBecomeTrue()"，该函数将如下所示:
If you use the second approach *ngIf="seeIfItHasBecomeTrue()", the function will look like this:
function(_ck,_v) {
var _co = _v.component;
var currVal_1 = _co.seeIfItHasBecomeTrue(); <--- function call
_ck(_v,5,0,currVal_1);
}
而且函数调用比简单的成员访问性能更重.
And the function call is more performance heavy than simple member access.
要了解有关 updateRenderer 函数的更多信息，请阅读:
To learn more about updateRenderer function read:
这篇关于Angular 2 性能:绑定数据成员比绑定函数更好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！