详解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对象。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。