object.defineProperty() -- Vue必要会内容

Object.defineProperty()

　　会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

 

例如：

方式 一 声明的对象 

 

　　let egObjectA =  { name:"狗蛋"，age:18 }；

 

方式 二 声明的对象　

 

　　let egObjectB = { name:"狗蛋" }；

　　Object.defineProperty(egObjectB,"age",{

　　　　value:18　　,　　//该属性的值

　　})

 

方式一与方式二声明的对象有什么不同呢 ？

 

1、首先方式二声明的egObjectB对象中，age属性无法枚举

　　遍历该对象的时候，无法遍历到该属性

　　因为该属性的enumerable,默认值是false

2、其次egObjectB对象中，age属性无法被修改

　　一旦修改将返回false

　　因为该属性的writable属性，默认值为false

3、再者egObjectB对象中，age属性无法被删除

　　因为该属性的configurable属性，默认值为false

 

所以使用方式二声明的属性，可以根据自身需求，做一些限制

　　Object.defineProperty(egObjectB,"age",{

　　　　value:18　　　　　，//该属性的值

　　　　enumerable : false , //是否可以被枚举，默认false

　　　　writable : false　　, //是否可以被修改，默认false

　　　　configurable : false ,//是否可以被删除，默认false

　　　　

　　　　get(){　　　　//当有人读取 "age", 属性时，get就会被调用，切返回值就是该属性的值

　　　　　　return 

　　　　},　　　　　  //默认undefined

　　　　set(value){　　　　//当有人修改对象中 "age" 属性时，set函数被调用，且会收到修改的具体值

　　　　　　

　　　　}，　　　　 //默认undefined　　

　　})

 

拥有布尔值的键 configurable、enumerable 和 writable 的默认值都是 false

属性值和函数的键 value、get 和 set 字段的默认值为 undefined

 

Vue中的数据代理

　　1、Vue中的数据代理

　　　　通过vue中的实例来代理 data对象中 属性的操作（读/写 = get/set）

　　2、好处

　　　　更加方便的操作data中的数据

　　3、基本原理

　　　　通过Object.defineProperty() 把data对象中所有属性添加到vue是的实例对象上,

　　　　为每一个添加在vue实例上的属性都指定一个 getter/setter

　　　　在getter/setter内部去操作（读/写）data中对应的属性

 

举个🌰 ：

　　vue中from表单的双数据绑定，

　　首先声明 data中 name属性为小明，

 

读： vue实例通过数据收集，把data中的数据添加到vue实例对象 _data上

　　通过Object.defineProperty()添加属性 name ：data.name 添加到vue实例对象上　　(使用的getter)

　　（此时的name === vue._data.name === data.name)

 

 

此时数据展示的时候，name展示的就是data.name的数值（getter）

 修改name的时候，调用setter == 直接修改data中的数据　(setter)