vue是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过`Object.defineProperty()`来实现对属性的劫持,达到监听数据变动的目的。其主要功能是:
-
数据代理
-
模板解析
-
数据劫持
- 双向数据绑定
本博客将带你模仿vue各功能的实现:
一 数据代理
遍历data里面所有的属性,通过Object.defineProperty()给data里每一个属性添加对应的属性描述符,在getter/setter内部去操作data中对应的属性数据。
// MyVue 是我给自己框架起的名字相当于Vue
const vm = new MyVue({
el: "#app",
data: {
msg: 'hello word'
}
})
function MyVue(options) {
this.$options = options;
var data = this._data = this.$options.data;
var me = this;
Object.keys(data).forEach(function(key) { // <1> 遍历data中所有属性
me._proxy(key); // <2> 对每一个属性实现代理
});
// <6> 对data进行监视 回头再看
observe(data, this);
// <5>创建一个用来编译模板的compile对象,用来解析模板以及模板里的指令
this.$compile = new Compile(options.el || document.body, this)
}
MyVue.prototype = {
$watch: function(key, cb, options) {
new Watcher(this, key, cb);
},
_proxy: function(key) {
var me = this;
// <3> 重新定义属性的getter/setter
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
get: function proxyGetter() {
return me._data[key]; // <4.1>读取data中对应属性值返回
},
set: function proxySetter(newVal) {
me._data[key] = newVal; // <4.2>将最新的值保存到data中对应的属性上
}
});
}
};