什么是变更检测？angular的变更机制

1. 什么是变更检测？

变更检测是指在一个计算机程序中，检测对一个数据模型的改变，并保证这个数据模型和应用程序的视图保持同步。在Angular框架中，变更检测是指Angular如何检测组件所关联的数据模型的变化，并为这些变化更新DOM。

2. Angular的变更机制

2.1 变更检测策略

Angular中的变更检测策略有两种：默认的变更检测策略和OnPush变更检测策略。默认的变更检测策略是指Angular为每个组件建立了一个变更检测器，当组件关联的数据模型发生变化时，Angular会在每个组件上运行一次变更检测器。这种检测机制的效率并不高，因为即使数据模型的改变不会影响组件的视图，Angular也会运行这个组件的变更检测器。

OnPush变更检测策略，指定了当组件的输入属性变化时，Angular才会运行变更检测器。这种检测机制可以提高检测效率，但需要开发人员自己来确定何时应该使用它。

2.2 变更检测器

变更检测器是Angular用来检测数据模型变化的机制。当变更检测器启动时，它会检查和比较数据模型的先前状态和当前状态，如果有变化，则更新DOM元素。

在Angular中，每个组件都有一个变更检测器。当一个组件绑定到一个数据模型时，它会创建一个变更检测树。变更检测器会递归遍历这个树，在每个节点上比较先前状态和当前状态，如果有变化，则更新DOM元素。

2.3 变更检测的优化

Angular为了提高变更检测的效率，采用了一些优化措施。其中一种优化措施是使用NgZone，它可以将变更检测器绑定到特定的区域中，只有在这个区域中的变化才会触发变更检测。另外，Angular还使用了ChangeDetectionRef，用于手动触发变更检测，以及使用OnPush变更检测策略来减少变更检测次数，从而提高效率。

@Component({

  selector: 'app-sample',
  templateUrl: './sample.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SampleComponent implements OnInit {
  ngOnInit(): void {
    // ...
  }
  ngDoCheck(): void {
    console.log('变更检测被触发');
  }
}

上面的代码演示了如何使用OnPush变更检测策略。在这个组件中，只有在组件的输入属性发生变化时，Angular才会触发变更检测。

3. 总结

本文介绍了Angular中的变更检测机制，包括变更检测策略、变更检测器以及变更检测的优化方法。了解Angular的变更检测机制可以帮助开发人员更好地优化应用程序的性能，提高用户体验。