Vue中的Object.defineProperty怎么用

这篇“Vue中的Object.defineProperty怎么用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue中的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()注意点

用Object.defineProperty方法创建一个新属性时，如果不指定configurabel，enumberable，writable特性的默认值都是false，修改已定义的属性特性无限制。

Configurable性定义为不可配置就不能把它变回可配置，此时调用Object.defineProperty修改除writable之外的特性都会报错。

模拟访问和设置的行为：想要访问器属性模拟默认行为的话，必须的在里面新添一个属性不然会造成循环引用

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怎么用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。