时间戳

首页 > 解决方案 > 在 Angular 中从模板中引用属性或 getter 的性能

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

问题描述

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

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

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

在组件中：

export class TestComponent {
    public isActivate: boolean;

但它可以有一个吸气剂：

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

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

标签： 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函数

推荐阅读