Angular中的ChangeDetection机制怎么实现

这篇文章主要介绍“Angular中的Change Detection机制怎么实现”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular中的Change Detection机制怎么实现”文章能帮助大家解决问题。

创新互联主要从事网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务双流,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

什么是 Change Detection ?

在应用的开发过程中，state 代表需要显示在应用上的数据。当 state 发生变化时，往往需要一种机制来检测变化的 state 并随之更新对应的界面。这个机制就叫做 Change Detection 机制。

在 WEB 开发中，更新应用界面其实就是对 DOM 树进行修改。由于 DOM 操作是昂贵的，所以一个效率低下的 Change Detection 会让应用的性能变得很差。因此，框架在实现 Change Detection 机制上的高效与否，很大程度上决定了其性能的好坏。

Change Detection 是如何实现的

Angular 可以检测组件数据何时更改，然后自动重新渲染视图以反映该更改。但是在像点击按钮这样的低级事件之后，它怎么能做到这一点呢？

通过 Zone ， Angular 能够实现自动的触发 Change Detection 机制。

Zone 是什么呢？简而言之，Zone 是一个执行上下文（execution context），可以理解为一个执行环境。与常见的浏览器执行环境不同，在这个环节中执行的所有异步任务都被称为 Task ，Zone 为这些 Task 提供了一堆的钩子（hook），使得开发者可以很轻松的「监控」环境中所有的异步任务。

题外话：由于 Angular 极力的推崇使用可观察对象（Observable），如果完全的基于 Observable 来开发应用，可以代替 Zone 来实现追踪调用栈的功能，且性能还比使用 Zone 会稍好一些。

  // Angular 在 v5.0.0-beta.8 起可以通过配置不使用 Zone 
  import { platformBrowser } from '@angular/platform-browser';
  platformBrowser().bootstrapModuleFactory(AppModuleNgFactory, { ngZone: 'noop' });

覆盖浏览器默认机制

Angular 在启动时会重写浏览器 low-level API，例如addEventListener，它是用于注册所有浏览器事件的浏览器函数，包括点击处理。Angular 将替换addEventListener为与此等效的新版本：

// this is the new version of addEventListener                                    
function addEventListener(eventName, callback) { 
    // call the real addEventListener                
    callRealAddEventListener(eventName, function() { 
        //first call the original callback              
        callback(...);
        // and then run Angular-specific functionality
        var changed = angular.runChangeDetection();
        if (changed) {
            angular.reRenderUIPart();
        }
    });
}

新的addEventListener为任何事件处理程序添加了更多功能：不仅调用了注册的回调，而且 Angular 有机会运行更改检测并更新 UI。

支持浏览器异步 API

修补了以下常用浏览器机制以支持更改检测：

• 所有浏览器事件（单击、鼠标悬停、按键等）

• setTimeout()和setInterval()

• Ajax HTTP 请求

事实上，Zone.js 修补了许多其他浏览器 API，以透明地触发 Angular 更改检测，例如 Websockets。

这种机制的一个限制是，如果由于某种原因 Zone.js 不支持的异步浏览器 API，则不会触发更改检测。例如，IndexedDB 回调就是这种情况。

默认的变更检测机制是如何工作的？

每个 Angular 组件都有一个关联的变更检测器，它是在应用程序启动时创建的。例如：

@Component({
    selector: 'todo-item',
    template: `{{todo.owner.firstname}} - {{todo.description}}
       - completed: {{todo.completed}}`
})
export class TodoItem {
    @Input()
    todo:Todo;

    @Output()
    toggle = new EventEmitter