前端框架中的MVVM，MVC，MVW

• M model 模型
  起到连接服务器，和商业逻辑的形成
• V view 视图
  前端的 HTML， CSS 和 与 HTML CSS 有关的JS代码
• VM view model 视图的模型 （模型与视图的连接者）
• P presenter 展示器
  展示作用, 部分控制
• C controller 控制器
  主体控制。比如读取 M 的数据，然后插入一个模块到 V 视图里

• W whatever 随意
  不分的那么具体。更为灵活。 由于我们本身使用大量框架和库，强制分离某些功能导致开发过程极其缓慢。

  
  
  image.png
  
  
  image.png
• 简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。
• mvc(vm)框架都实现了单向数据绑定，双向数据绑定无非就是在单向绑定的基础上给可输入元素（input、textare等）添加了change(input)事件，来动态修改model和 view，并没有多高深。

Vue.js双向绑定的实现原理

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

image.png

function MVVM(options) {
    this.$options = options;
    var data = this._data = this.$options.data, me = this;
    // 属性代理，实现 vm.xxx -> vm._data.xxx
    Object.keys(data).forEach(function(key) {
        me._proxy(key);
    });
    observe(data, this);
    this.$compile = new Compile(options.el || document.body, this)
}

MVVM.prototype = {
    _proxy: function(key) {
        var me = this;
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;
            }
        });
    }
};