如何实现Angular中的变更检测机制？

本文共计1716个文字，预计阅读时间需要7分钟。

什么是变更检测？

变更检测是一种自动化的技术，用于监控应用程序中的数据或状态变化，并在检测到变化时执行相应的操作。在Angular框架中，变更检测机制允许开发者跟踪组件的数据绑定，并在数据发生变化时自动更新视图。

下面简要介绍一下Angular中的变更检测机制，以及如何通知变更检测、变更检测策略等。

一、什么是变更检测？

概述：一种自动通知机制，用于在数据变化时更新视图。

二、Angular中的变更检测机制

1. 默认的变更检测策略：Angular使用检查模式（Check Mode）进行变更检测，即在每次检查数据变化时都会执行变更检测。

2. 触发变更检测的条件：当组件的输入属性（如输入变量、事件等）发生变化时，Angular会触发变更检测。

3. 变更检测的过程：Angular通过跟踪数据变化，并使用Zone.js库来管理事件循环，实现数据变化与视图更新的同步。

三、通知变更检测

1. 使用`ChangeDetectionStrategy`枚举：在组件类中，通过设置`changeDetection`属性来指定变更检测策略。

2. 常用变更检测策略： - `Default`（默认）：每次检测数据变化时都会执行变更检测。 - `OnPush`：仅在输入属性发生变化时执行变更检测，提高性能。

四、变更检测策略

1. `OnPush`策略：适用于无状态组件（没有输入属性），可以显著提高性能。

2. `Default`策略：适用于有状态组件（有输入属性），需要手动管理数据变化。

希望对大家有所帮助！

什么是变更检测？下面本篇文章带大家聊聊Angular中的变更检测机制，介绍一下状态变化如何通知变更检测、Angular变更检测策略，希望对大家有所帮助。

一、什么是变更检测

• 概括： 一种更改检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发DOM的更新。
• 变更检测的基本任务： 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型。

二、什么引起了变更

事件驱动，来源有以下三大类:

• 事件：页面 click、submit、mouse down……
• XHR：从后端服务器拿到数据
• Timers：setTimeout()、setInterval()

这几点有一个共同点，就是它们都是异步的，也就是说，所有的异步操作是可能导致数据变化的根源因素，所以每当执行一些异步操作时，我们的应用程序状态可能发生改变，而这时则需要去更新视图

三、状态变化怎么通知变更检测

在Angular当中则接入了NgZone，由它来监听Angular所有的异步事件，Angular 在启动时会重写（通过 Zone.js）部分底层浏览器 API（暴力的拦截了所有的异步事件）。

常见的有两种方式来触发变化检测，一种方法是基于组件的生命周期钩子

ngAfterViewChecked() { console.log('cluster-master.component cd'); }

另一种方法是手动控制变化检测的打开或者关闭，并手动触发

constructor(private cd: ChangeDetectorRef) { cd.detach() setInterval(() => { this.cd.detectChanges() }, 5000) }

三、Angular 变更检测

Angular 的核心是组件化，组件的嵌套会使得最终形成一棵组件树，Angular 的变化检测可以分组件进行，每个组件都有对应的变化检测器 ChangeDetector，可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器，这使得我们可以对每个组件分别控制如何以及何时进行变更检测。

四、变更检测策略

Angular还让开发者拥有定制变化检测策略的能力。

• default: 每次变更检测都会引起组件的变更检测，包括其他组件的状态变化，以及本组件引用型变量内部属性值变化
• Onpush: 每次变更检测会跳过本组件的变更检查，除非满足一些条件

4.1 default

Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default，每次异步事件 callback 结束后，NgZone会触发整个组件树 至上而下做变化检测

4.2 onPush

OnPush 策略，用以跳过某个 component 以及它下面所有子组件的变化检测

其实在设置了 OnPush 策略以后，还是有许多方法可以触发变更检测的；

• 1）组件的 @Input 属性的引用发生变化。
• 2）组件内的 DOM 事件，包括它子组件的 DOM 事件，比如 click、submit、mouse down。
• 3）组件内的 Observable 订阅事件，同时设置 Async pipe。
• 4）组件内手动使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、变化检测对象引用

• markForCheck()：使用于子组件，将该子组件到根组件之间的路径标记起来，通知 angular 检测器下次变化检测时一定检查此路径上的组件，即使设置了变化检测策略为 onPush
• detectChanges()：手动发起该组件到各个子组件的变更检测
• detach()：将组件的检测器从检测器数中脱离，不再受检测机制的控制，除非重新 attach 上
• reattach()：把脱离的检测器重新链接到检测器树上

更多编程相关知识，请访问：编程视频！！

以上就是什么是变更检测？聊聊angular的变更机制的详细内容，更多请关注自由互联其它相关文章！