Angular模板中使用Getter获取Signal的性能优化问题

场景描述 #

我有一个通过Getter暴露Signal的服务，该Getter直接在HTML模板中使用，但我担心性能问题。由于Angular的变更检测会在每次重渲染时调用Getter，我怀疑这会导致低效。

当前实现 #

服务代码：

signal = signal();
getSignal() {
  return this.signal;
}

模板代码：

<h1>
  {{ service.getSignal()() }}
</h1>

问题 #

1. 在此场景下使用Getter是否因每次重渲染都被调用而低效？
2. 是否可通过将Signal存储在类变量或其他方式避免该问题？
3. Angular是否会内部优化，使该问题无需担忧？

解答 #

1. Getter调用的性能影响 #

这个场景下的Getter只是返回一个已存在的Signal引用，没有复杂计算、异步操作或状态变更，每次调用的开销极低——就是简单的属性访问加返回操作，哪怕变更检测频繁触发，也几乎不会带来性能问题。真正需要警惕的是在Getter里做复杂逻辑、数据转换、新对象创建的场景，那种情况才会因重复调用产生不必要的开销。

2. 优化方案：缓存Signal到组件变量 #

如果想避免模板中重复调用Getter，可以在组件类里把Signal缓存起来：

// 组件代码
componentSignal: Signal<any>;

constructor(private service: YourService) {
  this.componentSignal = this.service.getSignal();
}

然后模板直接使用组件变量：

<h1>
  {{ componentSignal() }}
</h1>

这种方式在组件初始化时仅获取一次Signal引用，后续模板渲染直接访问组件变量，完全跳过Getter调用环节。如果需要基于该Signal做衍生计算，也可以用组件的computed信号包装，但当前场景下直接缓存引用已经足够简单高效。

3. Angular的内部优化 #

Angular对Signal有专门的优化机制：一旦模板中通过signal()调用读取值，Angular会自动跟踪这个Signal的依赖，只有当Signal本身的值发生变化时，才会触发相关模板区域的重渲染，而非每次全局变更检测都执行所有表达式。
另外，虽然Angular不会对模板中的函数调用（包括Getter）做记忆化缓存，但你的Getter只是返回引用，实际性能损耗可以忽略不计。只有带复杂逻辑的Getter才需要自行处理缓存，当前场景完全无需担心Angular的优化不足。

内容的提问来源于stack exchange，提问作者Vincent Menzel