相信很多人都知道双向绑定原理是基于Object.defineProperty实现的，通过该方法将对象的属性转化为getter/setter，进而实现响应式，（顺便提一句该方法在低版本的浏览器没有很好的支持，所以这也是ie8以下不支持vue的原因），话不多说，下面来一步步实现吧！
首先我们定义一个对象，一个girl:
let girl = {}
let height = '1.70m'
Object.defineProperty(girl, 'height', {
get: () => {
console.log(`height属性被获取了`);
return height
},
set: (newVal) => {
console.log(`height属性被修改了`);
height = newVal
}
})
下面当我们操作对象girl的height属性的时候，她已经可以实现主动通知对应的属性被获取或者修改了：
girl.height
height属性被获取了
"1.70m"
girl.height = '1.80m'
height属性被修改了
"1.80m"
借助object.defineProperty方法我们已经实现了对象的可观察了，如果有对该方法不了解的学可以参考mdn上面的介绍
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
，刚刚只是实现了对对象的某一个属性实现了可观察了，要是想实现对一个对象的所有属性可观察还不行， 下面我们来修改下代码，声明一个方法observe（观察）：
function observe(value, cb) {
Object.keys(value).forEach((key) => defineReactive(value, key, value[key], cb));
}
function defineReactive(obj, key, val, cb){
Object.defineProperty(obj, key, {
// enumerable: true,
// configurable: true,
get: ()=>{
console.log(`${key}属性被获取了`);
return val
},
set:newVal=> {
console.log(`${key}属性被修改了`);
val = newVal;
// cb();
}
})
}
下面我们再来创建一个girl，这一次我们多声明几个她的属性，并调用下observe方法，将她的所有属性都实现可观测：
let girl = { height: '1.7m', weight: '48kg', whole: '90分'}
observe(girl)
girl.height = '1.64m'
height属性被修改了
1.64m
girl.weight = '50kg'
weight属性被修改了
50kg
girl.whole = '94分'
10 whole属性被修改了
94分
girl.whole
whole属性被获取了
94分
到此，我们已经实现了数据的可观测了，下面我们来将代码丰富下：
class Vue {
constructor(options) {
this._data = options.data;
observe(this._data, options.render);
}
}
function observe(value, cb) {
Object.keys(value).forEach((key) => defineReactive(value, key, value[key], cb));
}
function defineReactive(obj, key, val, cb){
Object.defineProperty(obj, key, {
get: ()=>{
console.log(`${key}属性被获取了`);
return val
},
set:newVal=> {
console.log(`${key}属性被修改了`);
val = newVal;
cb();
}
})
}
let app = new Vue({
el: '#app',
data: {
text: 'text',
text1: 'text1'
},
render(){
console.log("render");
}
})
有没有发现什么，现在当我们访问app._data.text或者修改它的时候，已经实现可观察了：
app._data.text
text属性被获取了
"text"
app._data.text = '哈哈'
text属性被修改了
"哈哈"
是不是已经有点那么个意思了，可能不少人又问了，平常用vue，都是app.data直接修改的啊，别急，下面我们来简单代理下，增加一个代理方法，然后在类vue的原型里面调用下：
function _proxy (data) {
const _this = this;
Object.keys(data).forEach(key => {
Object.defineProperty(_this, key, {
get: function proxyGetter () {
return _this._data[key];
},
set: function proxySetter (val) {
_this._data[key] = val;
}
})
});
}
class Vue {
constructor(options) {
this._data = options.data;
observe(this._data, options.render);
// 代理data下
_proxy.call(this, options.data);
}
}
下面我们再来试试：
image
到此简单响应式我们已经实现了，下面我们简单总结下，Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集(后面依赖收集篇章会讲到)，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图，大家想想上面代码里面render方法的作用！
希望这篇文章对大家有帮助，如果发现有任何错漏的地方，也欢迎向我指出，谢谢大家~(鄙人才疏学浅，如有理解不到或是错误的地方还望各位看客见谅)
网友评论