详解Vue源码之数据的代理访问
概念解析：
1)数据代理:通过一个对象代理对另一个对象(在前一个对象内部)中属性的操作(读/写)
2)vue数据代理:通过vm对象（即this）来代理data对象中所有属性的操作
3)好处:更方便的操作data中的数据
4)基本实现流程
a.通过Object.defineProperty()给vm添加与data对象的属性对应的属性描述符
b.所有添加的属性都包含getter/setter
c.getter/setter内部去操作data中对应的属性数据
疑问
不知道你在使用Vue的时候有没有想过，为什么定义在data对象中的属性，可以用Vue的实例this进行访问？
我们来看看源码的实现。
varsharedPropertyDefinition={
enumerable:true,
configurable:true,
get:noop,
set:noop
};
//源码中是这样调用的：proxy(vm,'_data',key)
//vm是Vue的实例，key是data对象属性的名字
functionproxy(target,sourceKey,key){
sharedPropertyDefinition.get=functionproxyGetter(){
returnthis[sourceKey][key]
};
sharedPropertyDefinition.set=functionproxySetter(val){
this[sourceKey][key]=val;
};
Object.defineProperty(target,key,sharedPropertyDefinition);
}
比如有个如下demo
constvm=newVue({
el:'#app',
data:{message:'HelloVue!'},
created(){
console.log(this.message)//输出HelloVue!
console.log(this._data.message)//同样输出HelloVue!
}
})
也就是说当我们这样this.message写的时候，Vue通过Object.defineProperty给this.message设置一层代理，实际访问的是this._data里的message属性，而this._data指向的对象就是我们写的data对象。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。