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

Question

我创建了一个简单的 angular 组件来测试使用 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 次（在这里查看）

是否有任何最佳实践规则指出这一点getter并且setters不应在 html 组件上使用？使用这种方法会出现性能问题吗？

谢谢！

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

Answer 1

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

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

2. 始终使用不可变数据，在任何更改时更新整个数组/对象。如果您不熟悉 Google 不变性，它对OnPush.

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

4. 如果您的计算状态产生一个新的数组或对象- 始终使用纯管道以避免不必要的重新计算，因为它是一个更繁重的操作并且不适合 getter。

5. 如果您的 getter 不会改变 - 考虑延迟初始化模式：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters

6. 避免 ngOnChange支持@Inputs上的 setter - 这样您的更改会更“直接”地传播。有些东西改变了 - 相关的东西被更新，而不是“副作用”到一些稍后调用的钩子。

注意：这些只是我在与 Angular 一起处理复杂项目的几年中发展起来的事情的想法。

您可以在我写的这篇文章中阅读有关编写 Angular 代码的声明式方法的更多信息：https : //indepth.dev/compatible-components-declarative-approach-in-angular/

Answer 2

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

相反，您应该在诸如 ngOnInit 之类的东西中计算您想要的任何内容并将其分配给变量或使用管道。

如果您想在每次值更改时进行计算，您应该使用管道，因为它只会在输入值更改时调用，而不是每次更改检测运行时调用。