Vue defineProperty使用教程

let obj = {
  name : 'hzh',
  sex : '男',
}
Object.defineProperty(obj,'age',{ // 第三个参数为相关配置，相当于我们给了age属性一个值为18
  value : 18
})
console.log(obj); // {name: 'hzh', sex: '男', age: 18}
let newobj = Object.keys(obj) 
console.log(newobj);// ['name', 'sex'] 说明不能被枚举
obj.age = 20;
console.log(obj); // 还是{name: 'hzh', sex: '男', age: 18}，说明age属性不可写、不可配置 

obj.age = 20;
Object.defineProperty(obj,'age',{ // 第三个参数为相关配置，相当于我们给了age属性一个值为18
  value : 18,
  writable : true
})
console.log(obj); // {name: 'hzh', sex: '男', age: 20} 修改完成

let newobj = Object.keys(obj) 
Object.defineProperty(obj,'age',{ // 第三个参数为相关配置，相当于我们给了age属性一个值为18
  value : 18,
  writable : true,
  enumerable : true
})
console.log(newobj);// ['name', 'sex', 'age'] 说明可以被枚举了

let newobj = Object.keys(obj) 
Object.defineProperty(obj,'age',{ // 第三个参数为相关配置，相当于我们给了age属性一个值为18
  value : 18,
  writable : true,
  enumerable : true,
  configurable : true
})
delete obj.age // 如果没有配置项configurable为true,那么这里应该是false，也就意味着不能被删除
console.log(obj); // {name : 'hzh',sex : '男'} 说明可以被删除了

<code class="language-plaintext hljs">let number = 18; 
let obj = {
  name :'hzh',
  sex :'男'
}
Object.defineProperty(obj,'age',{
  get(){
    console.log(`有人读取了age属性，值为${number}`)
    return number // 返回的就是 age 属性的值
  }
})
console.log(obj);</code>

let number = 18;
let obj = {
  name :'hzh',
  sex :'男'
}
Object.defineProperty(obj,'age',{
  get(){
    console.log(`有人读取了age属性，值为${number}`)
    return number
  },
  set(value){
    console.log(`有人正在修改age值,值为${value}`)
    number = value
  }
})
console.log(obj);