Vue defineProperty使用教程

更新時間：2023年01月09日 08:33:48 作者：執(zhí)迷原理

Vue通過Object.defineProperty來實現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀?。▽傩灾械膅etter和setter方法）實現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理

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);