Angular 15模板绑定新对象实例：变更检测与性能问题咨询

核心问题解答 #

• 模板中的对象字面量会在每次变更检测时重建：Angular每次执行变更检测循环时，都会重新计算模板里的表达式。像{ size: 10, label: 'hello' }这种对象字面量，每次计算都会生成一个新的对象引用，不会复用之前的实例。

直接这么写的问题 #

• 触发不必要的变更通知：对于使用默认变更检测策略的组件，@Input的引用每次变化都会触发ngOnChanges钩子，甚至导致组件重新渲染。如果是大型应用或者频繁触发变更检测的场景（比如滚动、输入框实时输入），会额外消耗性能。
• 子组件做无用功：如果这个@Input传给子组件，子组件可能会因为输入引用频繁变化，执行一些不必要的逻辑（比如重新初始化数据、调用服务接口等）。

关于纯管道的情况 #

纯管道的缓存逻辑是基于输入参数的引用或值的变化。以[config]="{ size: someotherObject | calcSize, label: 'hello' }"为例：

• 只要someotherObject的引用没有变化，calcSize纯管道不会重复执行，Angular会复用之前的计算结果。
• 但外层的对象字面量依然会每次重建，所以父组件到子组件的@Input变更通知还是会触发，只是管道本身不会额外消耗性能。

最佳实践 #

• 将配置对象移到组件类中：在组件的.ts文件里定义类属性，比如：

  // 组件类中
  config = { size: 10, label: 'hello' };
  

  模板中直接绑定：[config]="config"。只有当你手动修改这个对象的引用或内部属性时，才会触发变更检测。
• 动态生成配置的处理：如果配置需要依赖其他变量动态生成，可通过组件类的getter或ngOnChanges钩子来更新：

  // 组件类中
  someotherObject: SomeType;
  config: { size: number; label: string };
  
  ngOnChanges(changes: SimpleChanges) {
    if (changes['someotherObject']) {
      this.config = {
        size: this.calcSizePipe.transform(this.someotherObject),
        label: 'hello'
      };
    }
  }
  

  （注：使用管道时需在组件类中注入对应的纯管道实例）

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