Vue 响应式原理（双向数据绑定原理）

vue 中的双向数据绑定其实就是在单向数据绑定的基础上，给可输入元素（input textare） 等添加change事件，来动态改变绑定的Model 以及视图。

先来一张结构图：

 首先，这个vue 是通过数据劫持结合发布者-订阅者模式来实现的双向绑定。首先通过Object.defineProperty() 给每个属性绑定getter / setter 。当数据发生变化时，发布消息给订阅者，出发相应的回调函数，完成视图更新。

1、数据监听器Observer

源码里面是这样的：

先是处理对象数据，先遍历对象的key 然后通过响应式函数defineReactive 实现响应式数据，内部的原理依然是Object.defineProperty() 实现的，此时数据都是响应式的，也就是说我们可以监听到数据的变化了

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;
        }
    });
}

接下来，当监听到数据的变化之后，我们需要通知订阅者，以完成相关的数据更新；

如何通知订阅者？我们要实现一个消息订阅器，用来收集消息订阅者，当数据变动时，就触发notify()， notify() 会调用订阅者的 update()  方法，完成视图更新ÿ