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()注意點

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怎么用”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。