Vue defineProperty使用教程
1.認識defineProperty
它是Object對象上的一個靜態(tài)實例方法，該方法作用為允許精確地添加或修改對象的屬性。
2.defineProperty
2.1使用defineProperty
該方法是Object對象上的一個靜態(tài)方法，該方法具有三個參數(shù)，第一個參數(shù)為，我們要操作的一個對象，第二個參數(shù)為想要添加或修改的屬性名稱，第三個參數(shù)為一些相關配置。此方法允許更改這些額外詳細信息的默認值。默認情況下，使用添加的屬性Object.defineProperty()不可寫、不可枚舉且不可刪除或者別的配置。
let obj = {
name : 'hzh',
sex : '男',
}
Object.defineProperty(obj,'age',{ // 第三個參數(shù)為相關配置，相當于我們給了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屬性不可寫、不可配置 2.2為defineProperty定義的屬性添加額外配置
可以被修改，向配置選項添加writable值為true，默認為false
obj.age = 20;
Object.defineProperty(obj,'age',{ // 第三個參數(shù)為相關配置，相當于我們給了age屬性一個值為18
value : 18,
writable : true
})
console.log(obj); // {name: 'hzh', sex: '男', age: 20} 修改完成可以被枚舉，向配置選項添加enumerable值為true，默認為false
let newobj = Object.keys(obj)
Object.defineProperty(obj,'age',{ // 第三個參數(shù)為相關配置，相當于我們給了age屬性一個值為18
value : 18,
writable : true,
enumerable : true
})
console.log(newobj);// ['name', 'sex', 'age'] 說明可以被枚舉了可以被刪除，向配置選項添加configurable值為true，默認為false
let newobj = Object.keys(obj)
Object.defineProperty(obj,'age',{ // 第三個參數(shù)為相關配置，相當于我們給了age屬性一個值為18
value : 18,
writable : true,
enumerable : true,
configurable : true
})
delete obj.age // 如果沒有配置項configurable為true,那么這里應該是false，也就意味著不能被刪除
console.log(obj); // {name : 'hzh',sex : '男'} 說明可以被刪除了2.3defineProperty的getter
業(yè)務：當有人讀取defineProperty定義的對象的屬性時，那么getter(get函數(shù))就會被調(diào)用，且返回值就是我們利用defineProperty定義的對象的屬性值(所以不允許配置項里面有了getter以后還有value，不然會報錯)
<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>
2.4defineProperty的setter
業(yè)務：當有人修改defineProperty定義的對象的屬性時，那么setter(set函數(shù))就會被調(diào)用，且會收到修改的具體值
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);
到此這篇關于Vue defineProperty使用教程的文章就介紹到這了,更多相關Vue defineProperty內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家詳細介紹了vue3實現(xiàn)關鍵字高亮指令的相關資料,w文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11
pinia是一個輕量級的狀態(tài)管理庫,屬于 vue3 生態(tài)圈新的成員之一,下面這篇文章主要給大家介紹了關于Vue項目新一代狀態(tài)管理工具Pinia的使用教程,需要的朋友可以參考下2022-11-11
今天小編就為大家分享一篇對VUE中的對象添加屬性，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法
今天小編就為大家分享一篇vuex實現(xiàn)像調(diào)用模板方法一樣調(diào)用Mutations方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
路由的本質(zhì)就是一種對應關系，根據(jù)不同的URL請求，返回對應不同的資源。那么url地址和真實的資源之間就有一種對應的關系，就是路由2022-11-11
Vue零基礎入門之模板語法與數(shù)據(jù)綁定及Object.defineProperty方法詳解
這篇文章主要介紹了Vue初學基礎中的模板語法、數(shù)據(jù)綁定、Object.defineProperty方法等基礎，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-09-09
這篇文章主要為大家詳細介紹了vue驗證碼插件使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
混入(mixin)提供了一種非常靈活的方式，來分發(fā)vue組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項2022-12-12
vue使用element-plus依賴實現(xiàn)表格增加的示例代碼
這篇文章主要為大家詳細介紹了vue使用element-plus依賴實現(xiàn)表格增加,文中示例代碼講解的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2023-12-12