Vue数据双向绑定

vue数据双向绑定，是vue开发者的核心理论。从传统的MVC开发模式（单向数据绑定model-->view），过渡到现在的MVVM开发模式（双向数据绑定model-->view-->viewmodel），极大地简洁了开发者对数据的操作。

综合下来，数据绑定有两点。视图层到数据层，数据层到视图层。

• 视图层到数据层很简单，可以完全取决于事件的触发，比如通过监听输入框的change或者input事件，然后将输入的值和数据的值进行关联绑定。
• 数据层到视图层是一个相对理论性较复杂的点。简单来说，其实是通过Object.defineProperty()方法，对属性的值通过get方法进行获取，通过set方法进行设置。

 Object.defineProperty(data, key, {
        enumerable: true,
        configurable: true,
        get: function() {
            return val;
        },
        set: function(newVal) {
            val = newVal;
            console.log('属性' + key + '已经被监听了，现在值为：“' + newVal.toString() + '”');
        }
    });

model-->data数据绑定.png

要实现数据绑定，上面的图很清晰。我们能看到，数据的绑定是通过Observer数据监听器进行数据劫持的，它会递归的监听到所有对象的属性。

还需要watcher订阅者，他的作用是负责将变化的数据，通过更换模板和绑定发的函数，更改视图。

由于会有很多的订阅者，则需要一个负责在监听器和订阅者之间的桥梁，消息的订阅收集器，有新的订阅者，他就会加入到收集器Dep中，当监听器监听到数据变化，则会通知消息订阅收集器。由它统一通知到相应的订阅者，进而对视图进行更新。

我们还看到需要编译器，它负责编辑和解析DOM节点，初始化视图，此外还需会对DOM节点的指令，比如：v-model、v-bind、v-on绑定的数据和函数进行解析，添加到watcher订阅者中，从而使得和数据监听器关联起来。

从上面的图示中，我们可以看到这是实现model-->view的完整过程。