前端數據綁定實現

VUE

// VUE
var App = {};
Object.defineProperty(App, 'test', {
get : function(){//取值時觸發
console.log('get');
},
set : function(val){//賦值時觸發，val可以是任意類型
console.log('set',val)
},
//writable : false,//是否爲可寫,false不可再賦值 設置該屬性後 get和set不能再定義
configurable : true,//是否爲可配置的  false不可更改配置 包括刪除
enumerable : true//是否爲可枚舉的 flase是不可枚舉，for in獲取不到該屬性
});

Angular

數據綁定和事件綁定

事件綁定：觸發DOM上的事件，angular監聽到通知，然後執行對應的函數

數據綁定：ng的數據流是自父到子單向流動的，每一個組件都有一個變化ChangeDetector檢查器，這些檢查器構成一棵樹。當用戶在觸發事件、請求數據後、異步事件等觸發數據改變後，angular會從根部往下進行檢查，進行數據比對，如果改變了，就講改變後的值同步到視圖上。angular2+引入zonejs來監聽所有的異步事件，通知框架進行髒檢查。zonejs可以分組多任務來執行檢查，同時也應用到angular的Directive指令中，angular默認自動檢查，但是有一個OnPush的策略可以配置成免檢查，

changeDetection:ChangeDetectionStrategy.OnPush, // 檢測策略

然後自己手動通過ChangeDetectorRef來觸發改變。

abstract class ChangeDetectorRef {
      abstract markForCheck(): void // 當輸入已更改或視圖中發生了事件時，組件通常會標記爲髒的（需要重新渲染）。調用此方法會確保即使那些觸發器沒有被觸發，也仍然檢查該組件。
      abstract detach(): void //從變更檢測樹中分離開視圖。 已分離的視圖在重新附加上去之前不會被檢查。 與 detectChanges() 結合使用，可以實現局部變更檢測。 即使已分離的視圖已標記爲髒的，它們在重新附加上去之前也不會被檢查。
      abstract detectChanges(): void // 檢查該視圖及其子視圖。與 detach 結合使用可以實現局部變更檢測。
      abstract checkNoChanges(): void // 檢查變更檢測器及其子檢測器，如果檢測到任何更改，則拋出異常。在開發模式下可用來驗證正在運行的變更檢測器是否引入了其它變更。
      abstract reattach(): void // 把以前分離開的視圖重新附加到變更檢測樹上。 視圖會被默認附加到這棵樹上。
    }

zonejs將setTimeout，addEventListener、promise等異步事件包裹起來，觸發事件、請求數據、異步事件等都在ngZone中執行，這樣就可以知道這3類事件被觸發，通知angular進行髒檢查。