浅谈MVVM是如何实现数据双向绑定的？

• angular 脏值检测
• backbone 发布者订阅者模式
• vue 数据劫持（结合发布者订阅者的模式）

关于Object.defineProperty()

一、主要实现思路：

1. observe数据监视器：通过对数据对象属性及其子属性进行遍历递归，通过Obeject.defineProperty()方法加上setter,getter，来实现监听数据的变化。
2. 添加订阅者功能：用来实现数据发生变化时通知订阅者，方法如下，维护一个数组用来收集订阅者，当数据变化时触发notify(),来调用update()方法实现更新。
3. 通过dep添加订阅者。
4. 实现Compile: 主要的任务就是解析模板指令，将模板中的变量替换成数据，初始化渲染页面视图，再给每个指令下对应的节点绑定更新函数，添加订阅者，当数据发生变化时，将得到通知，然后更新视图。需要注意的一点是：为避免频繁操作DOM节点造成性能的过度消耗，可以将el节点暂时转换成fragment文档碎片，进行编译解析。完事儿再将fragment添加回原来的真实dom节点中。
5. 实现Watcher：它作为主要的任务是成为Compile及Observe数据监视器之间通信的桥梁。

1、在自身实例化时往属性订阅器(dep)里面添加自己
2、自身必须有一个update()方法
3、待属性变动dep.notice()通知时，能调用自身的update()方法，并触发Compile中绑定的回调，则功成身退。

通过Object.defineProperty()方法，递归数据对象的每个属性，都添加上 setter, getter，以实现数据被赋新值时触发setter，实现监听。并通过创建的通知订阅者功能，通知订阅者。

var data = {name: 'kindeng'};
observe(data);
data.name = 'dmq'; // 哈哈哈，监听到值变化了 kindeng --> dmq

function observe(data) {
    if (!data || typeof data !== 'object') {
        return;
    }
    // 取出所有属性遍历
    Object.keys(data).forEach(function(key) {
        defineReactive(data, key, data[key]);
    });
};

function defineReactive(data, key, val) {
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        enumerable: true, // 可枚举
        configurable: false, // 不能再define
        get: function() {
            return val;
        },
        set: function(newVal) {
            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
        }
    });
}

如何完成订阅者功能：首先维护一个数组subs，其次通过监听数据对象的属性是否变化，再调用notify()实现对数据对象的更新。

function defineReactive(data, key, val) {
    var dep = new Dep();
    observe(val); // 监听子属性
    Object.defineProperty(data, key, {
        set: function(newVal) {
            if (val === newVal) return;
            console.log('哈哈哈，监听到值变化了 ', val, ' --> ', newVal);
            val = newVal;
            dep.notify(); // 通知所有订阅者
        }
    });
}
function Dep() {
    this.subs = [];
}
Dep.prototype = {
    addSub: function(sub) {
        this.subs.push(sub);
    },
    notify: function() {
        this.subs.forEach(function(sub) {
            sub.update();
        });
    }
};