【Vue】Object.defineProperty

Object.defineProperty

Object.defineProperty( 要给哪个对象添加属性，添加的属性叫什么名，配置项 )

例如下面这个例子就是给 person 增加了个属性 age，值为18

let person = {
	name:"张三",
  sex:"男"
}
Object.defineProperty(person,'age',{
  value:18
})

在控制台打印可以发现新增的属性 age 和前面两个属性颜色深浅不一样。age 颜色淡一点想表达的意思是这个 age 是不可以被枚举、修改、删除的。

enumerable（控制属性可以被枚举）

但是如果希望通过 Object.defineProperty 添加的属性可以被遍历，则可以在配置项中添加个 enumerable 属性，设置为true。他的默认值是 false。但是这个时候，age 属性不可被修改！

Object.defineProperty(person,'age',{
  value:18,
  enumerable:true, //控制属性是否可以枚举，默认值是 false
})

如果尝试修改，里面的数据并没有发生改变，不可被修改！！！

writable（控制是否能被修改）

如果希望添加的属性值后续可以被修改，则可以在配置项中添加 writable 属性，设置为 true。

Object.defineProperty(person,'age',{
  value:18,
  enumerable:true, //控制属性是否可以枚举，默认值是 false
  writable:true, //控制属性是否可以被修改
})

但是这个时候，新增的属性 age 不能被删除

configurable（控制是否能被删除）

如果希望后续删除新增的属性，则可以在配置项中添加 configurable 属性，设置为 true

Object.defineProperty(person,'age',{
  value:18,
  enumerable:true, //控制属性是否可以枚举，默认值是 false
  writable:true, //控制属性是否可以被修改，默认值是false
  configurable:true, //控制属性是否可以被删除，默认值是 false
})

get

当有人读取 person 的 age 属性时，get 函数就会被调用，且返回值就是 age 的值

Object.defineProperty(person,'age',{
  value:18,
  // 当有人读取 person 的 age 属性时，get 函数就会被调用，且返回值就是 age 的值
  get:function(){
    return 'hello'
  }
})

鼠标点击三个点后：

因此若希望 person 中的 age 属性和外部的 number 属性对应。希望 number 改变后，age 属性也可以跟着改变，则可以如下所示：

let number = 18
Object.defineProperty(person,'age',{
  value:18,
  // 当有人读取 person 的 age 属性时，get 函数就会被调用，且返回值就是 age 的值
  get:function(){
    return number //返回 number
  }
})

set

当有人修改 person 的 age 属性时，set 函数（setter）就会被调用，且会收到修改的具体值

let number = 18
Object.defineProperty(person,'age',{
  value:18,
  // 当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
  set:function(value){
    console.log('有人修改了age属性，且值是',value)
    number = value
  }
})