Angular： 变化检测策略Change Detection的比较

在Angular中，变化检测是框架的一个核心功能，它能够检测组件数据的变化并相应地更新DOM。Angular提供了不同的变化检测策略，主要有OnPush和Default。

1. Default变化检测策略：每次事件循环都会检查组件的输入属性和模板是否有变化。
2. OnPush变化检测策略：通常用于提升性能，只有当组件的输入属性发生变化时才会检查变化。

示例代码：

// 默认变化检测策略
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-default-cd',
  template: `<div>{{ data }}</div>`,
  changeDetection: ChangeDetectionStrategy.Default // 默认就是Default策略
})
export class DefaultCdComponent {
  data = 'Initial data';
 
  updateData() {
    this.data = 'Updated data';
  }
}
 
// OnPush变化检测策略
import { Component, ChangeDetectionStrategy } from '@angular/core';
 
@Component({
  selector: 'app-on-push-cd',
  template: `<div>{{ data }}</div>
              <button (click)="updateData()">Update</button>`,
  changeDetection: ChangeDetectionStrategy.OnPush // 设置为OnPush策略
})
export class OnPushCdComponent {
  data = 'Initial data';
 
  updateData() {
    this.data = 'Updated data'; // 这里的变化不会触发组件视图更新，除非有其他输入属性变化
  }
}

在OnPushCdComponent中，即使调用updateData()方法，视图也不会更新，除非有其他输入属性的变化触发了更新。这样做可以提升性能，因为它减少了不必要的DOM更新。