Change Detection (變化檢測) 是 Angular 2 中最重要的一個特性。當組件中的數據發生變化的時候，Angular 2 能檢測到數據變化并自動刷新視圖反映出相應的變化。

在介紹變化檢測之前，我們要先介紹一下瀏覽器中渲染的概念，渲染是將模型映射到視圖的過程。模型的值可以是 JavaScript 中的原始數據類型、對象、數組或其他數據對象。然而視圖可以是頁面中的段落、表單、按鈕等其他元素，這些頁面元素內部使用 DOM(Document Object Model) 來表示，為了更好地理解，我們來看一個具體的示例：

代碼如下:
<h4 id="greeting"></h4> <script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>

這個例子很簡單，因為模型不會變化，所以頁面只會渲染一次。如果數據模型在運行時會不斷變化，那么整個過程將變得復雜。因此為了保證數據與視圖的同步，頁面將會進行多次渲染。接下來我們來考慮一下以下幾個問題：

1、什么時候模型會發生變化

2、模型產生了什么變化

3、變化后需要更新的視圖區域在哪里

4、怎么更新對應視圖區域

而變化檢測的基本目的就是解決上述問題。在 Angular 2 中當組件內的模型發生變化的時候，組件內的變化檢測器就會檢測到更新，然后通知視圖刷新。因此變化檢測器有兩個主要的任務：

1、檢測模型的變化

2、通知視圖刷新

接下來我們來分析一下什么是變化，變化是怎么產生的。

變化和事件

變化是舊模型與新模型之間的區別，換句話說變化產生了一個新的模型。讓我們來看一下下面的代碼：

import { Component } from '@angular/core'; @Component({ selector: 'exe-counter', template: ` <p>當前值：{{ counter }}</p> <button (click)="countUp()"> + </button>` }) export class CounterComponent { counter = 0; countUp() { this.counter++; }}

頁面首次渲染完后，計數器的當前值為0。當我們點擊 + 按鈕時，計數器的 counter 值將會自動加1，之后頁面中當前值也會被更新。在這個例子中，點擊事件引起了 counter 屬性值的變化。

我們繼續看下一個例子：

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'exe-counter', template: `  <p>當前值：{{ counter }}</p> ` }) export class CounterComponent implements OnInit { counter = 0; ngOnInit() {  setInterval(() => { this.counter++;  }, 1000); }}

該組件通過 setInterval 定時器，實現每秒鐘 counter 值自動加1。在這種情況下，它是定時器事件引起了屬性值的變化。最后我們再來看個例子：