Angular 中从模板引用属性或 getter 的性能

Question

我有一个关于 Angular 性能的问题。引用公共属性和组件中定义的 getter 之间是否存在性能差异？

示例：
我有一个模板，它引用了isActivate在组件中定义的模板，如下所示：

<div *ngIf="isActivate">Do stuff...</div>

在组件中：

export class TestComponent {
    public isActivate: boolean;

但它可以有一个 getter 来代替：

public get isActivate(): boolean {
    return true;
}

在性能方面，哪个更好，为什么？

Answer 1

在每次变化检测时，Angular 都会比较之前和当前的边界值。getter（即函数）与属性访问之间的性能差异在不执行任何操作之前没有任何区别function。如果我们想优化它 -使用纯管道来记忆该函数。

另一个更通用的解决方案是创建apply管道：

@Pipe({
  name: 'apply',
})
export class ApplyPipe implements PipeTransform {
  transform<T, U extends any[]>(fn: (...fnArgs: U) => T, ...args: U): T {
    return fn(...args);
  }
}

// TS
foo = {};
computeSmth(foo){
  // some computation
  return 'result';
}

// HTML
{{ computeSmth | apply : foo}}

PS我们还可以使用装饰器来记忆getter函数