Question

我创建了一个简单的角度组件来测试使用getter / setter样式的变量的用法：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  _name = 'Variable Example';
  get name(): string {
    console.log("GET!!!");
    return this._name;
  }

  set name(value:string): void {
    this._name = value;
  }
}

然后，我在html上使用此变量：

<p>
  {{ name }}
</p>

我注意到get name()被调用了4次（在here中实时检查）

有任何最佳实践规则指出getter和setters不应用于html组件吗？使用这种方法会出现性能问题吗？

谢谢！

PS：这不是真实的情况，它只是我正在做的一个小例子。

Answer 1

您应该避免从模板中调用方法/获取器，因为每次更改检测运行时都会调用该方法。

相反，您应该在ngOnInit之类的内容中计算所需的内容，并将其分配给变量或使用管道。

如果要在每次值更改时都进行计算，则应使用管道，因为只有在输入值更改时才调用管道，而不是在每次更改检测运行时才调用管道。

Answer 2

以下是我的经验法则，对我很有帮助：

1）始终使用OnPush 更改检测策略以避免不必要的检查

2）始终使用不可变数据，并在发生任何更改时更新整个阵列/对象。如果您不熟悉Google不变性，那么它非常有帮助，并且是OnPush的必备条件。

3）从不存储可以计算的状态。如果可以使用说组件@Inputs进行计算-请输入 getter 。用数学计算一个简单的吸气剂或遍历一个小数组非常快速，并且省去了同步状态的麻烦。我在Firefox中进行了基准测试，一个简单的getter遍历100个元素，每秒执行700万次。通常，getter不会成为应用程序的瓶颈，并且使用它们更容易，而不是更新生命周期挂钩中的状态。但请进一步阅读。

4）如果您的计算状态产生了新的数组或对象-始终使用纯管道以避免不必要的重新计算，因为这会造成很大的麻烦操作较重，不适合使用吸气剂。

5）如果您的吸气剂不会改变，请考虑惰性初始化模式： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters

6）避免使用ngOnChange ，而使用@Inputs上的setter-这样，您的更改将更“直接”传播。更改了一些内容-更新了相关的内容，而不是“副作用”它到稍后要调用的某些挂钩中。

注意：这些只是我对Angular在复杂项目上工作两年来开发的想法。

在HTML（角组件）上使用setter和getter变量

2 个答案: