Vue中的Object.defineProperty全面理解
更新時間：2022年04月30日 11:27:32 作者：godkzz
這篇文章主要介紹了Vue中的Object.defineProperty全面理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Object.defineProperty理解
定義：Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。
直接添加
let person = {
? ? name:'張三',
? ? sex:'男',
}
Object.defineProperty(person,'age',{
? ? value:18,
? ? enumerable:true,//控制屬性是否可以枚舉，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性才會出現(xiàn)在對象的枚舉屬性中。
? ? writable:true,//控制屬性是否可以被修改，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，才能被賦值運算符改變。
? ? configurable:true,//控制屬性是否可以被刪除，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性能從對應(yīng)的對象上被刪除。 ?
? ? ? ? ? ? ?
})
console.log(person);使用getter、setter
let age_number = 18;
let person = {
? ? name:'張三',
? ? sex:'男',
}
Object.defineProperty(person,'age',{
? ? //value:18,
? ? //enumerable:true,//控制屬性是否可以枚舉，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性才會出現(xiàn)在對象的枚舉屬性中。
? ? //writable:true,//控制屬性是否可以被修改，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，才能被賦值運算符改變。
? ? //configurable:true,//控制屬性是否可以被刪除，默認(rèn)值是false，當(dāng)該屬性的值為 true 時，該屬性能從對應(yīng)的對象上被刪除。 ?
? ? get(){
? ? ? ? console.log("讀取age屬性");
? ? ? ? return age_number;
? ? },
? ? set(value)
? ? {
? ? ? ? console.log("修改age的值");
? ? ? ? age_number = value;
? ? } ? ? ? ? ? ? ?
})
console.log(person);需要Object.defineProperty()注意點
1.用Object.defineProperty方法創(chuàng)建一個新屬性時，如果不指定configurabel，enumberable，writable特性的默認(rèn)值都是false，修改已定義的屬性特性無限制。
2.Configurable性定義為不可配置就不能把它變回可配置，此時調(diào)用Object.defineProperty修改除writable之外的特性都會報錯。
3.模擬訪問和設(shè)置的行為：想要訪問器屬性模擬默認(rèn)行為的話，必須的在里面新添一個屬性不然會造成循環(huán)引用
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會造成循環(huán)引用，狂call不止
person.a → get.call(person) → this.a → person.a ?→ get.call(person) → this.a......
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue+element 商品列表、新增、編輯、刪除業(yè)務(wù)實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能
這篇文章主要介紹了vue-router結(jié)合vuex實現(xiàn)用戶權(quán)限控制功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue如何實現(xiàn)簡易的彈出框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js路由mode配置之去掉url上默認(rèn)的#方法
今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家介紹了vue項目中一定會用到的性能優(yōu)化技巧實例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了全局引入vant后使用Toast的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue分割面板封裝實現(xiàn)記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
computed是vue的配置選項,它的值是一個對象,其中可定義多個計算屬性,每個計算屬性就是一個函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-08-08
Vue Router的手寫實現(xiàn)方法實現(xiàn)
這篇文章主要介紹了Vue Router的手寫實現(xiàn)方法實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
如果項目中多個組件都使用到WebSocket請求,那么我們需要對WebSocket進行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下2024-07-07