vue2響應式原理之Object.defineProperty()方法的使用

更新時間：2023年10月07日 09:52:19 作者：山海入夢

這篇文章主要介紹了vue2響應式原理之Object.defineProperty()方法的使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

前言

最近一直在研究vue2響應式原理，去官網(wǎng)看一遍文檔，好像懂了但又好像不懂，然后去查看別人寫的響應式原理和視頻，好的理解了百分六七十頭皮發(fā)麻，vue2的響應式原理實現(xiàn)的核心就是Object.defineProperty()方法，所以自己也跟著手敲一下響應式源碼記錄對Object.defineProperty的理解

一、Object.defineProperty()

1.概念

Object.defineProperty() 方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象.

這句話到底什么意思呢？

我們簡單實現(xiàn)這個方法

var obj = {}
Object.defineProperty(obj, 'name', {
  value:'科比'
})
console.log(obj.name)  //科比

可以看出Object.defineProperty()能為我們定義一個屬性，又有人會想為什么我們不直接定義obj.name='科比'，而使用這個方法不更加麻煩嗎?

2.Object.definProperty()方法

可以設置額外隱藏的屬性使用這些屬性能夠使對象更加自由的被定義

var obj = {}
Object.defineProperty(obj, 'name', {
  value:'科比',
  //是否可寫
  writable: false 
})
Object.defineProperty(obj, 'number', {
  value:24,
  //是否可枚舉
  enumerable: false 
})
//修改屬性報錯
obj.name = "庫里"  //Cannot assign to read only property 'name' of object '#<Object>'
console.log(obj.name)

通過obj對象定義writable: false 使你屬性不能修改，如果修改obj.name就會報錯;enumerable是否可以枚舉，所以使用這些屬性能夠使對象更加自由的被定義

二、Object.definProperty()方法的get()和set()

代碼如下（示例）：

通過這個示例可知訪問obj.name屬性就會觸發(fā)get()方法，修改obj.name屬性觸發(fā)set()方法

但是我們發(fā)現(xiàn)修改obj.name屬性為"喬丹"，打印為undefined這是為什么呢?

看一下get和set方法的介紹：

get

屬性的 getter 函數(shù)，如果沒有 getter，則為 undefined。當訪問該屬性時，會調用此函數(shù)。
執(zhí)行時不傳入任何參數(shù)，但是會傳入 this 對象（由于繼承關系，這里的this并不一定是定義該屬性的對象）。
該函數(shù)的返回值會被用作屬性的值。
默認為 undefined。

set

屬性的 setter 函數(shù)，如果沒有 setter，則為 undefined。
當屬性值被修改時，會調用此函數(shù)。
該方法接受一個參數(shù)（也就是被賦予的新值），會傳入賦值時的 this 對象。
默認為 undefined。

因為get的函數(shù)返回值會被當作屬性的值，而我們示例中get和set沒有return 任何值，就默認為undefined，修改后：

const obj = {}
Object.defineProperty(obj , 'name' , {
  get(){
    console.log('訪問obj.name屬性觸發(fā)')
    return "喬丹"
  },
  set(newValue) {
    console.log('修改obj.name屬性觸發(fā)' , newValue)
  }
})
obj.name  //訪問屬性
console.log(obj.name)  //喬丹
obj.name = "科比"  //修改屬性
console.log(obj.name)  //喬丹

能夠訪問到設置的obj屬性了，但是修改了obj.name = "科比"

最后打印還是"喬丹" ，但是set方法觸發(fā)的newValue是科比這又是為什么呢?

因為getter并不能返回你修改的值，只要你訪問obj.name他就是返回return "喬丹"

就如同你設置的set新屬性從未改變一樣非常固執(zhí)，那么我們應該怎么解決這個問題呢?

我們可以通過一個變量com進行周轉，修改如下：

var obj = {}
var com;  //設置變量周轉
Object.defineProperty(obj , 'name' , {
  get(){
    console.log('訪問obj.name屬性觸發(fā)')
    return com
  },
  set(newValue) {
    console.log('修改obj.name屬性觸發(fā)' , newValue)
    com = newValue
  }
})
obj.name  //訪問屬性
console.log(obj.name)  //喬丹
obj.name = "科比"  //修改屬性科比
console.log(obj.name)  //最后控制臺打印 科比

詳細了解Object.defineProperty()方法