先起个头 ,最近在看Vue深入vue原理,特此记录一下方便日后查看
我们可爱的程序员都知道 Vue 响应式原理是借助 Object 构造函数上面的 defineProperty()去做data 数据 收集的
先说特性
Object.defineProperty() 分数据属性跟访问其属性
他们是怎么区分的呢
Object.defineProperty(obj, key , {
configurable: false, // 是否可被删除
enumerable: false, // 是否可枚举
writable: false, // 是否可修改
value: undefined // 默认值
})
function observer(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: ()=>{ // 当数据被获取的时候 get 函数被触发
console.log('get')
/*....依赖收集等....*/
},
set:newVal=> { // 当数据被设置的时候 set 函数被触发
console.log(newVal)
cb();/*订阅者收到消息的回调*/
}
})
}
class Vue {
constructor(options) {
this.$data = options.data;
this.render = options.render
observer(this.$data, this.render)
}
}
let app = new Vue({
el: '#app',
data: {
text: 'texwt',
text2: 'textwwwwwwwwwww2'
},
render(){
console.log("render");
}
})
这是一种方式 第二种可以简化为 一下代码
class Vue {
constructor(options) {
this.$data = options.data;
this.render = options.render
this._proxy(options.data, options.render );/*构造函数中*/
}
/*代理*/
_proxy (data, callback) {
const that = this;
Object.keys(data).forEach(key => {
Object.defineProperty(that, key, {
configurable: true,
enumerable: true,
get: function proxyGetter () {
return that.$data[key];
},
set: function proxySetter (val) {
that.$data[key] = val;
callback()
}
})
});
}
}
let app = new Vue({
el: '#app',
data: {
text: 'texwt',
text2: 'textwwwwwwwwwww2'
},
render(){
console.log(this)
console.log("render");
}
})