详解Angular系列之变化检测(Change Detection)

概述 简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。 什么情况下会引起变化检测？ 总结起来, 主要有如下几种情况可能也改变数据： 用户输入操作，比如点击，提交等 请求服务端数据(XHR) 定时事件，比如setTimeout，setInterval 上述三种情况都有一个共同点，即这些导致绑定值发生改变的事件都是异步发生的。如果这些异步的事件在发生时能够通知到Angular框架，那么Angular框架就能及时的检测到变化。 左边表示将 变化检测是Angular框架的核心机制之一，它用于检测应用程序中模型和视图之间的数据绑定是否发生变化。当模型的数据更新时，Angular会自动同步这些变化到视图中，反之亦然。变化检测在Angular应用中至关重要，因为它确保了用户界面始终与应用程序的状态保持一致。 在Angular中，引起变化检测的主要场景包括： 1. **用户输入操作**：例如点击按钮、填写表单等交互行为，这些都会改变模型数据。 2. **服务端请求**：通过XHR (XMLHttpRequest) 或其他网络请求获取数据，数据加载完成后会更新模型。 3. **定时事件**：如`setTimeout`和`setInterval`，它们会在异步执行的回调函数中更新数据。 由于JavaScript是单线程的，异步任务会被放入任务队列中等待执行。当主线程的同步任务执行完毕，浏览器会从任务队列中取出异步任务并执行。这个过程是通过事件循环(event loop)来实现的。Angular利用了这个机制，特别是通过集成Zone.js库，来监控和触发变化检测。 Zone.js的工作原理是通过**猴子补丁(monkey patch)**技术来实现的。它会拦截并替换浏览器提供的异步API，如`setTimeout`、`addEventListener`等，将这些原生方法包裹在带有上下文感知的代理函数中。这些代理函数内部设置了钩子，当异步任务开始和结束时，钩子会通知Angular，从而触发变化检测。 变化检测的过程分为以下几个步骤： 1. **创建组件树**：Angular应用中的每个组件都有一个与之关联的变化检测器(ChangeDetector)。这些变化检测器组成了一棵与组件树结构相同的树，反映了组件间的父子关系。 2. **单向数据流**：数据从父组件流向子组件，保证了数据更新的有序性和效率。 3. **检查周期**：Angular有两种主要的变化检测策略：默认的`CheckOnce`和`Checked`。在每次检查周期中，Angular会遍历组件树，执行每个组件的变化检测器，检查其绑定的数据是否变化。 4. **最小范围更新**：为了提高性能，Angular只会在必要的范围内更新DOM，而不是全局刷新整个视图。这被称为“最小化DOM操作”。 在Angular 2及以上版本，还引入了OnPush变化检测策略，这是一种优化手段，只有当组件的输入属性发生变化时，才会触发该组件的变化检测。这减少了不必要的检测，提高了应用性能。 此外，开发者还可以通过手动调用`ChangeDetectorRef.detectChanges()`或`ChangeDetectorRef.markForCheck()`方法来触发变化检测，但这通常是在特定场景下（如自定义事件处理）进行的。 变化检测是Angular保证UI与模型同步的关键机制，它通过Zone.js监控异步事件，并通过组件树和数据流来有效地更新视图。理解这一机制对于开发高性能的Angular应用至关重要。