angular - 在 HTML 上使用 setter 和 getter 变量( Angular 组件)

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 次(在 here 中查看)

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

谢谢!

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

Answer 1

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

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

始终使用不可变数据 , 在任何更改时更新整个数组/对象。如果您不熟悉 Google 不变性，它对 OnPush 非常有帮助并且是必须的.

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

如果你的计算状态产生一个新的 阵列 或 对象 - 始终使用 纯管避免不必要的重新计算，因为它是一个更繁重的操作，不适合 getter。

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

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

通知:这些只是我在过去几年与 Angular 在复杂项目上合作开发的问题上的想法。
您可以在我写的这篇文章中阅读有关编写 Angular 代码的声明式方法的更多信息:
https://indepth.dev/compliant-components-declarative-approach-in-angular/