学习VUE,你必须知道如何使用Object.defineProxy。工作归工作。不要以为你能用就完了。很多时候,你需要看基础。今天讲一下Object.defineProxy的使用方法,方便以后讲Vue2.X源码的时候更容易理解。Object.defineProperty()方法可以直接在一个对象上定义一个新的属性或修改它的一个现有属性并返回这个对象。我们先举个例子。constobj={};constobj2=Object.defineProperty(obj,'property',{value:42,writable:false});obj.property=77;console.log(obj);//{property:42}obj2.test=3obj2.property=78;console.log(obj)//{test:3,property:42}obj.test=5console.log(obj2)//{test:5,property:42}可以查看输入输出参数三个,输出参数为原对象(修改)Object.defineProperty(obj,prop,descriptor)输入参数中第一个参数为要修改的对象,第二个参数是要定义或修改的属性,第三个参数是对应的属性描述符。前两个比较容易理解,重点看第三个参数。属性描述符有两种,一种是数据描述符,一种是访问描述符。数据描述符包含的属性有:configurable,enumerable,value,writable访问描述符包含的属性有:configurable,enumerable,get,set一个描述符不能同时有valueorwritable和getorset例如:constobj={};constobj2=Object.defineProperty(obj,'property',{writable:false,get(){return1}});console.log(obj2)这时候浏览器会报错:Invalidpropertydescriptor。不能同时指定访问器和一个值或可写属性属性介绍:可配置当且仅当该属性的可配置键值为真时,该属性的描述符可以被改变,该属性也可以从对应的对象中删除。默认为假。可枚举当且仅当该属性的可枚举键值为??真时,该属性才会出现在对象的枚举属性中。默认为假。value该属性对应的值。可以是任何有效的JavaScript值(数字、对象、函数等)。默认是undefinedwritable当且仅当属性的可写键值为true时,属性的值,即上面的值,可以通过赋值运算符(en-US)来改变。**默认为假。get比直接使用value可以做更多的操作。默认值undefinedset可以类比直接赋值。处理默认值undefined的函数比较多。几个简单的例子:constobj={};constobj2=Object.defineProperty(obj,'property',{writable:false,value:22});deleteobj2.propertyconsole.log(obj2)//你会发现属性不能删除constobj={};constobj2=Object.defineProperty(obj,'property',{get(){returnproperty},set(val){property=val+1}/});obj2.property=2console.log(obj2.property)//显示3这里值得注意的是set以及get函数中的property是如何设置或返回的。这些是简单的用法。下一篇文章会讲到VUE是如何使用的。
