Angular2.x中新增的Change Detection（变

angular中组件的数据发生变化的时候，就会自动的检测到数据的变化并且去更新视图，变化检测是Angular 2中的一个非常重要的特性，在针对视图的更新方面，Angular和Vue还是有一定的区别的。
Vue通过渲染到虚拟的DOM树中，当数据发生变化时，计算更新之后与之前的DOM树节点的差异，并且更新到真实的DOM中去。而Angular中则以变化检测去更新，浏览器渲染是将模型映射到视图的过程，比如：对象，数组，或者一些普通的数据类型变量。
当模型不会产生变化的时候，页面也仅次渲染一次，如果在处理一些特殊的业务场景时，数据实时处于变化状态，那么为了保证数据与视图的同步，页面将会进行多次渲染，Change Detection主要是为了解决模型发生变化并且通知视图更新的。

应用场景

当点击按钮事件时触发模型的变化，致使视图的更新

import { Component } from "@angular/core";

@Component({
  selector:'my-select',
  template:`
      <h5>{{ data }}</h5>
      <button (click)="handleAdd()"> 加</button>
  `
})

export class CountComponent {
  
  public data = 0;

  handleAdd() {
    this.data++;      
  }

}

还有一种情况就是在进行初始化的时候，会发送HTTP请求后台的接口数据，当请求成功返回的时候，组件的数据内容也同样的会被更新。

import { Component, OnInit } from "@angular/core";
import { Http } from "@angular/http";

@Component({
  selector:'my-select',
  template:`<ul>
      <li *ngFor = "let item in data">
          {{ item }}
      </li>
    </ul>`
})

export class CountComponent {
  
  public data = [];


  constructor(private http: Http) {}

  ngOnInit() {
     const url = '接口地址'   
     this.http.get(url).subscribe(res=> {
        this.data = res.retList;
      })
  }

}

Angular内部使用Zone来跟踪异步任务：

Angular中，在应用启动之前，Zone采用猴子补丁的方式，将所有的js异步任务进行了包裹，然后这些异步任务都能运行在Zone的执行上下文中，也就是说，Zone运行后调用的setTimeout等异步事件不再是原生的方法，而是被猴子补丁包裹后的代理方法，代理在setup钩子中，每个异步任务在Zone中都是一个任务。

NgZone是基于Zone实现的，在Angular环境内注册的异步事件中都运行在这个子Zone内，它拓展了自有的一些Api并添加了一些功能性的方法到它的执行上下文中。

主动控制变化检测：

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

比较：

变化检测实际上与Vue中的虚拟DOM的diff算法结果是一致的，都是为了减少修改DOM的范围，只不过虚拟DOM更轻。
(参阅网上部分资料)