什么是MVVM
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。
- 模型指的是后端传递的数据。
- 视图指的是所看到的页面。
- 视图模型是mvvm模式的核心,它是连接view和model的桥梁。它能够将数据转化为视- 图,也能将视图转化为模型,其中视图与模型是不能直接进行通信。
ViewModel通过DOM事件监听视图数据的变化,一旦数据发生改变则更新model数据; Model通过数据绑定机制,将数据渲染到视图的Dom上,从而实现了数据的双向绑定
function MVVM(options) {
//实例新增一个$options属性,然后把传递过来的配置并且进行暂存
this.$options = options;
this.$options.beforeCreate && this.$options.beforeCreate();
//在实例上新增加一个_data 保存传递过来的data数据
var data = this._data = this.$options.data;
//保存this,是为了之后使用this的时候,保证this指向的正确性
var me = this;
//通过Object.keys取出data中,每一项数据的属性名,然后遍历调用_proxy方法
Object.keys(data).forEach(function(key) {
// 数据代理proxy
me._proxy(key);
});
this.$options.created && this.$options.created();
//为data所有数据进行劫持,结合订阅发布模式
observe(data, this);
//增加模版解析。
this.$compile = new Compile(options.el || document.body, this)
}
MVVM.prototype = {
$watch: function(key, cb, options) {
new Watcher(this, key, cb);
},
//实现数据代理。
_proxy: function(key) {
var me = this;//暂存this,保证this的指向正确,这里的this还是实例vm。
//通过defineProperty方法,在实例(vm)上新增所有与data中属性所对应属性,并且为该属性添加get和set方法。
Object.defineProperty(me, key, {//vm.name
configurable: false,
enumerable: true,
get: function proxyGetter() {
//实现了vm代理data中数据的读操作---------
return me._data[key];
},
set: function proxySetter(newVal) {//vm.name = "bb"
//实现了vm代理data中数据的写操作---------
me._data[key] = newVal;
}
});
}
};
//*vue简版源码mvvm分析