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

我创建了一个简单的角度组件来测试使用 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 https://stackblitz.com/edit/angular-8conqj?file=src%2Fapp%2Fapp.component.html)

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

谢谢你！

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

以下是我的经验法则，对我非常有用：

1. 总是使用OnPush改变检测策略以避免不必要的检查

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

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

4. 如果你的计算状态产生一个新的array or object- 始终使用纯管以避免不必要的重新计算，因为这是一个繁重的操作并且不适合 getter。

5. 如果你的 getter 不会改变 - 考虑一下惰性初始化图案：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get#Smart_self-overwriting_lazy_getters

6. 避免 ngOnChange支持 @Inputs 上的设置器 - 这样您的更改可以更“直接”地传播。有些东西发生了变化 - 相关的东西被更新，而不是“副作用”它到稍后调用的某个钩子。

NOTICE:这些只是我在使用 Angular 处理复杂项目的几年中所开发的问题的想法。

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