这篇文章主要介绍了Vue中的Object.defineProperty全面理解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
- Object.defineProperty理解
- 直接添加
- 使用getter、setter
- 需要Object.defineProperty()注意点
Object.defineProperty理解
定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
直接添加
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。
writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。
configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。
})
console.log(person);
使用getter、setter
let age_number = 18;
let person = {
name:'张三',
sex:'男',
}
Object.defineProperty(person,'age',{
//value:18,
//enumerable:true,//控制属性是否可以枚举，默认值是false，当该属性的值为 true 时，该属性才会出现在对象的枚举属性中。
//writable:true,//控制属性是否可以被修改，默认值是false，当该属性的值为 true 时，才能被赋值运算符改变。
//configurable:true,//控制属性是否可以被删除，默认值是false，当该属性的值为 true 时，该属性能从对应的对象上被删除。
get(){
console.log("读取age属性");
return age_number;
},
set(value)
{
console.log("修改age的值");
age_number = value;
}
})
console.log(person);
需要Object.defineProperty()注意点
1.用Object.defineProperty方法创建一个新属性时，如果不指定configurabel，enumberable，writable特性的默认值都是false，修改已定义的属性特性无限制。
2.Configurable性定义为不可配置就不能把它变回可配置，此时调用Object.defineProperty修改除writable之外的特性都会报错。
3.模拟访问和设置的行为：想要访问器属性模拟默认行为的话，必须的在里面新添一个属性不然会造成循环引用
var obj={
a:1
};
Object.defineProperty(obj,"a",{
get:function(){
return this.a;
},
set:function(val){
this.a=val
}
});
obj.a;// Maximum call stack size exceeded
会造成循环引用，狂call不止
person.a → get.call(person) → this.a → person.a → get.call(person) → this.a......
以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue Object.defineProperty及ProxyVue实现双向数据绑定
- 使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
- vue用Object.defineProperty手写一个简单的双向绑定的示例
- js中Object.defineProperty()方法的不详解
- vue源码学习之Object.defineProperty 对数组监听
- Object.defineProperty()函数之属性描述对象
