ng2变化监测

angular提供了数据绑定的功能。所谓数据绑定就是将组件类的数据和页面的DOM元素关联起来。当数据发生变化时，angular能够监测到这些变化，并对其所绑定的DOM元素进行相应的更新，反之亦然。
异步事件的发生会导致组件中数据的变化，但angular并不是捕捉对象的变动，它采用的是在适当的时机去检验对象的值是否被改动。这个时机是由NgZone这个服务去掌控的，它获取到了整个应用的执行上下文，能够对相关的异步事件发生、完成或异常进行捕获，然后驱动angular的变化检测机制执行。

数据变化的源头

大致有三种引起数据变化的应用场景。一种是用户的行为操作，即页面操作所引发的事件，如click等，以此对用户的操作做出响应；第二种是前后端数据交互，如从后端服务拉取页面所需要的接口数据，如XMLHttpRequest等；最后一种是各类定时任务，即在某个延时后再来响应对应的操作，从而对页面数据做出改变，如setTimeout、setInterval等，它们都是延后到某个时间才触发相应的操作。
以上三种可能导致数据变化的情况有一个共同特征，即它们都是异步的处理，使用异步回调函数句柄来处理相关数据操作。因此，任意一个异步操作，都有可能在数据层面上发生改变，这会导致应用程序状态被改变。如果可以在每一个异步回调函数执行结束后，通知angular内核进行变化监测，那么任何数据的更改就可以在视图层实时地反馈出来。

变动通知机制

通过异步事件来通知angular进行变化监测，让任何数据的变更可以被实时地反应出来。实际上angular本身不具备这样的捕获异步事件的机制，为实现这种机制，angular引入了NgZone服务。
NgZone是基于Zones来实现的。NgZone从Zone中fork了一份实例，是Zone派生出来的一个子Zone，在angular环境内注册的异步事件都运行在这个子Zone上。NgZone拓展了一些API并添加了一些功能性方法，如onUnstable和onMicrotaskEmpty事件等，这些功能性的方法称作钩子（Hooks）。当有异步操作发生、完成或抛出异常时，会有对应的钩子对其进行捕获，以此来处理一些操作。
NgZone提供了一些可被订阅的自定义事件，这些自定义事件是Observable流，包括如下内容。

onUnstable：在angular单次事件启动前，触发消息通知订阅器。
onMicrotaskEmpty：在Zone完成当前angular单次事件任务时，立即通知订阅者。
onStable：在完成onMicrotaskEmpty回调函数之后，在视图变化之前立即通知订阅者，常用来验证应用程序的状态。

NgZone提供的这些自定义事件在跟踪定时任务和其他异步任务时非常有用。由于NgZone其实只是全局Zone的一个fork，angular能够决定在Zone内需不需要执行变化监测，例如NgZone的runOutsideAngular()方法可以让angular不执行变化监测。
runOutsideAngular()：即通知NgZone的父Zone在捕获到异步事件时直接返回，从而不再触发自定义onMicrotaskEmpty事件，直接作用就是不再通知angular执行变化监测。
变动通知机制即当有异步事件触发导致数据变化时，这些异步事件会被Zones捕获并触发onUnstable自定义事件，在该自定义事件绑定的函数中来通知angular去执行变化监测，如当鼠标经过的mousemove事件发生时，它将触发变化监测。

变化监测的响应处理

变化监测的处理机制

angular应用由大大小小的组件组成，这些有相互依赖关系的组件组成了一颗线性的组件树。每一个组件都有自己的变化监测器，由此组成了一颗变化监测树。变化监测树的数据是由上到下地流动，这是因为变化监测的执行总是由根组件开始，从上到下地监测每一个组件的变化。
当组件中数据有变动时，NgZone通过钩子捕获到变化并通知angular去执行变化监测。变化监测是单向线性的，即从根组件开始，依次触发各个子组件的变化监测器去完成变化的对比工作。在每个组件的执行环境中，angular都会创建一个变化监测类的实例，该实例能准确地记录每个组件的数据模型，并以此作为下一轮变化监测的参考标准。
默认情况下，任何一个组件模型中的数据变化都会导致整个组件树的变化监测，但其实很多组件的输入属性是没有变化的，因此没必要对这样的组件进行变化监测操作。减少不必要的监测操作可以提升应用程序的性能。

变化监测类

angular在整个运行期间都会为每一个组件创建变化监测类的实例，该实例提供了相关的方法来手动管理变化监测。当发生变化时，angular会从根组件到子组件来监测每个组件是否发生了变化。angular并不知道是哪个组件发生了变化但开发者知道，所以可以给这个组件做标记，以此来通知angular仅仅监测这个组件所在路径上的组件即可。
变化监测类ChangeDetectorRef提供的主要接口如下：

class ChangeDetectorRef {
    markForCheck():void
    detach():void
    detectChanges():void
    reattach():void
}

markForCheck()：把根组件到该组件之间的这条路径标记起来，通知angular在下次触发变化监测时必须检查这条路径上的组件。
detach()：从变化监测树中分离变化监测器，该组件的变化监测器将不再执行变化监测，除非再次手动执行reattach()方法。
reattach()：把分离的变化监测器重新安装上，使得该组件及其子组件都能执行变化监测。
detectChanges()：手动触发执行该组件到各个子组件的一次变化监测。

@Component({
    selector:'list',
    template:`
        <ul class="list">
            <li *ngFor="let contact of contacts">
                <list-item [contact]="contact"></list-item>
            </li>
        </ul>
    `
})
export class ListComponent implements OnInit {
    contacts:any={};
    constructor(
        //...
        private cd:ChangeDetectorRef
    ){
        cd.detach();
        //定时手动执行变化监测
        setInterval(()=>{
            this.cd.detectChanges();
        },5000);
    }
    ngOnInit(){
        this.getContacts();
    }
    getContacts(){
        this.contacts=data;
    }
}

变化监测策略

在angular中，每个组件都包含一些元数据，其中一些是可选的，例如changeDetction，他的作用是让开发者定义每个组件的变化监测策略。在使用该功能之前，需要先导入ChangeDetectionStrategy对象。

import { Component,ChangeDetectionStrategy } from '@angular/core';
@Component({
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class ContactComponent{}

ChangeDetectionStrategy枚举类型值有两种，分别是Default和OnPush。当值为Default时，组件的每次变化监测都会检查其内部的所有数据，以此得出前后的数据变化；当值为OnPush时，组件的变化监测只检查输入属性的值是否发生变化，当这个值为引用类型时，则只对比该值的引用。
如果子组件的更新只依赖输入属性的值，那么在子组件上使用OnPush策略是一个很好的选择。但OnPush策略只对比值的“引用”，在某些场景下不会达到预期效果。如子组件通过输入属性获得了父组件的一个Object值，如{a:1,b:2}，当父组件修改了该对象内的值，这时对象的引用没有发生变化，因此子组件的变化监测并不能感知到对象已变化。如果希望子组件也能正常更新数据，解决办法有两个：

修改变化监测策略为Default，但会牺牲性能。
使用Immutable对象来传值。

使用Immutable对象可以确保当对象值的引用地址不变时，对象内部的值或结构也会保持不变。反之，当对象内部发生变化时，对象的引用必然会发生改变。这个特性满足了在OnPush策略下，变化监测只对比引用地址即可知道数据是否发生了变化。

//子组件
import { Component,Input,ChangeDetectionStrategy } from '@angular/core';
@Component({
    selector:'list-item',
    template:`
        <div>
            <label>{{contact.get('name')}}</label>
            <span>{{contact.geet('telNum')}}</span>
        </div>
    `,
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class ListItemComponent {
    @Input() contact:any={};
}

子组件的数据更新只依赖输入属性contact的值，所以使用OnPush策略可以满足需求。

import { Component } from '@angular/core';
import Immutable from 'immutable';
@Component({
    template:`
        <list-item [contact]="contactItem"></list-item>
        <button (click)="doUpdate()">更新</button>
    `,
    changeDetection:ChangeDetectionStrategy.OnPush
})
export class ListComponent {
    contactItem:any;
    constructor(){
        this.contactItem=Immutable.map({
            name:'张三',
            telNum:'12345678'
        })
    }
    doUpdate(){
        this.contactItem=this.contactItem.set('telNum','87654321');
    }
}

父组件引入了Immutable工具库，并且把contactItem包装成Immutable对象。当点击更新按钮时，contactItem被赋值为新的对象引用，子组件监测到contactItem的引用变化，从而触发数据更新。