快捷導(dǎo)航

Vue defineProperty使用教程

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

Vue通過Object.defineProperty來實(shí)現(xiàn)監(jiān)聽數(shù)據(jù)的改變和讀取（屬性中的getter和setter方法）實(shí)現(xiàn)數(shù)據(jù)劫持。下面簡單記錄一下，vue監(jiān)聽數(shù)據(jù)變化的原理

1.認(rèn)識(shí)defineProperty

它是Object對象上的一個(gè)靜態(tài)實(shí)例方法，該方法作用為允許精確地添加或修改對象的屬性。

2.defineProperty

2.1使用defineProperty

該方法是Object對象上的一個(gè)靜態(tài)方法，該方法具有三個(gè)參數(shù)，第一個(gè)參數(shù)為，我們要操作的一個(gè)對象，第二個(gè)參數(shù)為想要添加或修改的屬性名稱，第三個(gè)參數(shù)為一些相關(guān)配置。此方法允許更改這些額外詳細(xì)信息的默認(rèn)值。默認(rèn)情況下，使用添加的屬性O(shè)bject.defineProperty()不可寫、不可枚舉且不可刪除或者別的配置。

let obj = {
  name : 'hzh',
  sex : '男',
}
Object.defineProperty(obj,'age',{ // 第三個(gè)參數(shù)為相關(guān)配置，相當(dāng)于我們給了age屬性一個(gè)值為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定義的屬性添加額外配置

可以被修改，向配置選項(xiàng)添加writable值為true，默認(rèn)為false

obj.age = 20;
Object.defineProperty(obj,'age',{ // 第三個(gè)參數(shù)為相關(guān)配置，相當(dāng)于我們給了age屬性一個(gè)值為18
  value : 18,
  writable : true
})
console.log(obj); // {name: 'hzh', sex: '男', age: 20} 修改完成

可以被枚舉，向配置選項(xiàng)添加enumerable值為true，默認(rèn)為false

let newobj = Object.keys(obj) 
Object.defineProperty(obj,'age',{ // 第三個(gè)參數(shù)為相關(guān)配置，相當(dāng)于我們給了age屬性一個(gè)值為18
  value : 18,
  writable : true,
  enumerable : true
})
console.log(newobj);// ['name', 'sex', 'age'] 說明可以被枚舉了

可以被刪除，向配置選項(xiàng)添加configurable值為true，默認(rèn)為false

let newobj = Object.keys(obj) 
Object.defineProperty(obj,'age',{ // 第三個(gè)參數(shù)為相關(guān)配置，相當(dāng)于我們給了age屬性一個(gè)值為18
  value : 18,
  writable : true,
  enumerable : true,
  configurable : true
})
delete obj.age // 如果沒有配置項(xiàng)configurable為true,那么這里應(yīng)該是false，也就意味著不能被刪除
console.log(obj); // {name : 'hzh',sex : '男'} 說明可以被刪除了

2.3defineProperty的getter

業(yè)務(wù)：當(dāng)有人讀取defineProperty定義的對象的屬性時(shí)，那么getter(get函數(shù))就會(huì)被調(diào)用，且返回值就是我們利用defineProperty定義的對象的屬性值(所以不允許配置項(xiàng)里面有了getter以后還有value，不然會(huì)報(bào)錯(cuò))

<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è)務(wù)：當(dāng)有人修改defineProperty定義的對象的屬性時(shí)，那么setter(set函數(shù))就會(huì)被調(diào)用，且會(huì)收到修改的具體值

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