Angular雙向數據綁定

雙向數據綁定： 所謂雙向數據綁定是指View(視圖)與Model(模型)之間的綁定：View<=>Model。

• View的改變： 通過界面交互使視圖發生改變，如Input框的輸入，Select元素的選擇，scrollBar滾動，瀏覽器視窗大小改變等等。
• Model的改變:  如在Ajax, promise, timeout等回調中對Model進行重新賦值,

View => Model：

在瀏覽器界面中，幾乎所有的交互行為我們都可以通過監聽其對應事件的方式去捕獲，如onchange, onresize, onscroll...因此View => Model非常簡單，兩個字:事件。

Angular中對事件監聽進行了封裝(如oninput=>(input))，舉個慄子: 　

<h1>Title is: {{title}}</h1>
<input type="text" (input)="valueChanged($event)">

Component中：

export class AppComponent {
　title = '';　
  constructor(){
  }
  valueChanged(e){
    this.title = e.target.value;
  }
}

通過監聽input事件，對title進行重新賦值，完成View=>Model過程。

Model=>View:

上述demo中，title的值被實時更新到了h1標簽中，這又是如何做到的呢？

瀏覽器並不能主動感知到什麼時候需要更新視圖，需要Angular在合適的時刻告知它：“老兄，我組件里有一個數據的值變了，你幫忙更新一下視圖唄。”

問題的核心在於及時告知， 在AngularJS中使用的是$digest迴圈進行臟值檢測，通過檢測scope下model的值是否有變動來判斷是否需要更新視圖。

Angular中也是相似的原理，上述例子中，當valueChanged方法完成後，

Angular立即進行了一遍臟值檢測，發現title的值相較之前發生改變了！於是便跑去找瀏覽器請求更新視圖，h1標簽中的內容就被更新啦。

然而Angular對於臟值檢測相較於AngularJS做了很大的改進，引入了Zone.js進行非同步管理（不再需要手動執行$apply()），採用單向數據流，允許用戶選擇手動/自動檢測模式...，提高了檢測性能。