Object.fineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。接收三个参数，Object.defineProperty(obj,prop,descriptor)，对象、新增或修改属性、修改属性描述和操作。乍一看，和a.b = b.a没啥区别。强大在descriptor上。
默认值如下，重点在get和set上。其他值自己试一下便知，下面就开始手动实现一个乞丐版vue，主要是Object.fineProperty部分，我们暂时低调的给它命名为，superVue。
image
（一）首先是代理的实现
image
image
vue实例中，我们通常都是直接赋值给this.值，打印中_data其实就是我们定义的data中的数据，但是打印实例对象，会发现外层也有我们在data中定义的数据，这都是因为vue通过数据代理的形式将data中的数据，平移到了数据外层。
首先建造一个superVue函数
function superVue(options) {
this.$options = options || {};
var data = this._data = this.$options.data;
var _this = this;//当前实例superVue
// 数据代理
// 实现 superVue._data.xxx -> superVue.xxx
Object.keys(data).forEach(function(key) {
_this._proxyData(key);
});
}
用Object.keys()对对象下的所有参数进行遍历，然后给当前superVue实例指定一个_proxyData(key)方法。
将方法挂载到superVue原型上，Object.defineProperty descriptor中设置如果外部获取执行get，就将_data中的值返回到当前实例中，如果外部设置，也就是执行this.name等操作，使用set方法将外部设置的新值newVal，同步到当前对象中，之后你还可以进行相关的监听处理，我们先把基础实现。
superVue.prototype = {
_proxyData: function(key) {
var _this = this;
Object.defineProperty(_this, key, {
configurable: false,
enumerable: true,
get: function () {
return _this._data[key];
},
set: function (newVal) {
_this._data[key] = newVal;
}
});
},
};
赋值打印一下， vm.name = "ceshi" console.log(vm)，成功，代理功能实现。
image.png
（二）数据绑定
superVue中使用observe(data, this)，再定义一个观察者函数进行数据劫持。
function observe(value, vm) {
if (!value || typeof value !== 'object') {
return;
}
return new Observer(value);
};
function Observer(data) {
this.data = data;
this.walk(data);
}
Observer.prototype = {
constructor: Observer,
walk: function(data) {
var me = this;
Object.keys(data).forEach(function(key) {
me.convert(key, data[key]);
});
},
convert: function(key, val) {
this.defineReactive(this.data, key, val);
},
defineReactive: function(data, key, val) {
var dep = new Dep();
var childObj = observe(val);
Object.defineProperty(data, key, {
enumerable: true, // 可枚举
configurable: false, // 不能再define
get: function() {
if (Dep.target) {
dep.depend();
}
return val;
},
set: function(newVal) {
if (newVal === val) {
return;
}
val = newVal;
// 新的值是object的话，进行监听
childObj = observe(newVal);
// 通知订阅者
dep.notify();
}
});
}
};
如果Dep.target 赋值了，再执行 dep.depend()，那么该值就会被添加到 dep 的 subs 数组内，来看一下dep中的定义。
var uid = 0;
function Dep() {
this.id = uid++;
this.subs = [];
}
Dep.prototype = {
addSub: function(sub) {
this.subs.push(sub);
},
depend: function() {
Dep.target.addDep(this);
},
removeSub: function(sub) {
var index = this.subs.indexOf(sub);
if (index != -1) {
this.subs.splice(index, 1);
}
},
notify: function() {
this.subs.forEach(function(sub) {
sub.update();
});
}
};
Dep.target = null;
如果重新赋值，如this.name = "test"则会进行到 dep.notify()中。此时就需要Watcher函数进行进一步处理。
Watcher.prototype = {
constructor: Watcher,
update: function() {
this.run();
},
run: function() {
var value = this.get();
var oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
},
addDep: function(dep) {
if (!this.depIds.hasOwnProperty(dep.id)) {
dep.addSub(this);
this.depIds[dep.id] = dep;
}
},
get: function() {
Dep.target = this;
var value = this.getter.call(this.vm, this.vm);
Dep.target = null;
return value;
},
parseGetter: function(exp) {
if (/[^\w.$]/.test(exp)) return;
var exps = exp.split('.');
return function(obj) {
for (var i = 0, len = exps.length; i < len; i++) {
if (!obj) return;
obj = obj[exps[i]];
}
return obj;
}
}
};
最终通过
image.png
触法回调更新页面
image.png
网友评论