前端数据绑定实现

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进行脏检查。