Angular 17+组件中是否应仅用Signals展示所有变量以优化性能？

随着Angular Signals的引入以及它对变更检测的优化作用，开发者常会疑惑：是否应该在Angular 17+组件模板中仅使用Signals而非类变量来展示数据，以此最大化性能提升？

类变量更新模板数据示例 #

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

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [CommonModule],
    template: `<div>Message from the component: {{ message }}</div>`,
})
export class TwoComponent {
    public message = 'Hello World!';

    // 更新消息并自动触发变更检测
    public changeMessage(value: string): void {
        this.message = value;
    }
}

Signals更新模板数据示例 #

import { CommonModule } from '@angular/common';
import { Component, signal } from '@angular/core';

@Component({
    selector: 'app-foo',
    standalone: true,
    imports: [CommonModule],
    template: `<div>Message from the component: {{ message() }}</div>`,
})
export class FooComponent {
    public message = signal('Hello World!');

    // 更新信号并自动触发变更检测
    public changeMessage(value: string): void {
        this.message.set(value);
    }
}

补充说明 #

• 上述示例仅针对基础模板与字符串场景，在处理复杂对象、数组或大型视图时，变更检测的性能差异会更加显著。
• Signals不仅用于组件层，在Service/Store等数据管理层也被广泛使用，能更高效地追踪数据依赖。

核心结论 #

1. 优先使用Signals提升性能
   Signals是Angular专为细粒度变更检测设计的特性，它能精准追踪数据的订阅与更新，避免传统类变量触发的全组件树变更检测扫描。尤其是在大型应用或复杂视图中，这种精准性会带来明显的性能提升。

2. 结合OnPush变更检测策略放大优势
   如果组件仅依赖Signals作为数据来源，可以将组件的变更检测策略配置为OnPush：

   import { ChangeDetectionStrategy } from '@angular/core';
   
   @Component({
       // ...其他配置
       changeDetection: ChangeDetectionStrategy.OnPush
   })
   

   此时Angular只会在Signals更新时触发组件的变更检测，完全跳过不必要的检测周期，进一步降低性能开销。

3. 无需完全废弃类变量
   对于简单的静态数据或一次性初始化的非响应式数据，使用类变量依然是合理的选择，不会带来明显的性能问题，且写法更简洁。只有当数据需要响应式更新时，Signals才是更优的方案。

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