Angular中computed()信号的内部工作原理是什么？

你提到官方文档只说Angular"知道"何时更新computed但未讲原理，核心其实是依赖追踪+惰性计算的组合逻辑，拆解为三个关键步骤：

1. 依赖收集：首次运行推导函数时记录依赖 #

当你创建computed(() => this.chartData().datasets)时，Angular不会立刻执行推导函数——直到你第一次读取datasets()时才会触发运行。

运行推导函数的同时，Angular会开启临时的"追踪上下文"：

• 函数内所有信号读取操作（比如this.chartData()，注意input.required返回的是只读信号，本质和普通信号一致），都会被自动记录为当前computed的依赖项。
• 最终datasets会维护一个依赖列表，其中就包含chartData信号。

2. 失效标记：依赖信号更新时标记computed为过时 #

当chartData信号的值被更新（比如父组件传入新的图表数据），这个信号会触发通知机制：

• 它会遍历所有依赖自己的computed（这里就是datasets），将这些computed的状态标记为已失效（stale），同时清空之前缓存的计算结果。
• 这一步不会立刻重新计算datasets的值，仅做"过期标记"。

3. 惰性重新计算：读取时检查状态并按需更新 #

当你再次读取datasets()时，Angular会先检查它的状态：

• 如果状态为失效，就重新运行推导函数，计算出新的this.chartData().datasets值，缓存该值并将状态改回"有效"，最后返回新值。
• 如果状态为有效，直接返回缓存值，跳过计算步骤。

结合你的代码例子具体说明 #

在ChartComponent中：

• chartData = input.required<ComponentChartData>()是只读信号，父组件输入变化时，信号值会自动更新。
• datasets = computed(() => this.chartData().datasets)的推导函数依赖chartData信号的读取。
• 当父组件传入新的chartData，chartData信号更新并标记datasets为失效；下次模板或代码中读取datasets()时，就会重新计算最新的数据集。

这种设计的核心优势是避免不必要计算——只有当依赖真的变化且computed被读取时，才会触发重新计算，以此提升性能。

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