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

Question

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

例子:
我有一个模板，它引用了 isActivate在这样的组件中定义:

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

在组件中:

export class TestComponent {
    public isActivate: boolean;

但它可以有一个 setter/getter :

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

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

Answer 1

在每个更改检测 Angular 比较以前和当前的界限值。 getter(即函数)与属性访问之间的性能差异直到 function没做什么。如果我们想优化它 - memoize使用 pure pipe 的函数.

另一个更通用的解决方案是创建 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函数