前言

使用過vue開發(fā)的盆友都知道Vue2和Vue3的響應(yīng)式原理是不一樣的，vue2用的是Object.defineProperty，vue3用的是proxy。那他們具體是什么呢？又有什么區(qū)別呢？

下面叫我簡(jiǎn)單做個(gè)筆記。有什么錯(cuò)誤望各位大佬不吝指點(diǎn)。

什么是Object.defineProperty()

Object.defineProperty是 es5 引入的一個(gè)方法，用于定義或修改對(duì)象的屬性的方法，可以控制屬性的特性（如可枚舉性、可配置性、可寫性等）。

Object.defineProperty()語(yǔ)法

Object.defineProperty(obj, prop, descriptor)

參數(shù)說明：

• obj：定義屬性的對(duì)象。
• prop：定義或修改的屬性的名稱。
• descriptor：屬性的描述符對(duì)象，包含屬性的特性設(shè)置。

descriptor 對(duì)象下包含的屬性：

• value：屬性的值。
• writable：屬性是否可寫，即是否可以使用賦值操作符改變屬性值。
• configurable：屬性描述符是否可以被改變，或者屬性是否可以被刪除，默認(rèn)為false。
• enumerable：屬性是否可枚舉，即是否會(huì)出現(xiàn)在使用 for...in 循環(huán)時(shí)。
• get：一個(gè)函數(shù)，當(dāng)屬性被讀取時(shí)調(diào)用，返回屬性值。
• set：一個(gè)函數(shù)，當(dāng)屬性被賦值時(shí)調(diào)用，接收新值作為參數(shù)。

<script>

// 定義一個(gè)對(duì)象名為（person）的對(duì)象【對(duì)象的屬性有（name、sex）】
let person = { name: '小明', sex: '男'}


//給對(duì)象（person）添加一個(gè)屬性名為（age）的屬性，屬性描述符只包含了 value 屬性，表示 age 屬性的初始值。
Object.defineProperty(person, 'age', {
    value: 18,         // 屬性的值 
    enumerable: true,  // 屬性是否可枚舉
    writable: true,    // 屬性是否可寫/可修改
    configurable: true // 屬性是否可以被刪除
})
 
console.log(person);

</script>

proxy簡(jiǎn)介

Proxy是ES6中的一種用于創(chuàng)建代理對(duì)象的特殊對(duì)象。它允許我們定義自定義行為，例如攔截和修改對(duì)象的默認(rèn)操作。Proxy可以用于攔截對(duì)象的各種操作，包括屬性訪問、賦值、函數(shù)調(diào)用等。

Proxy的構(gòu)造函數(shù)接受兩個(gè)參數(shù)：目標(biāo)對(duì)象（被代理的對(duì)象）和一個(gè)處理器對(duì)象（用于定義攔截器）

常用的攔截方法包括：get、set、apply、construct、deleteProperty、has、getOwnPropertyDescriptor等?！?strong>這些攔截方法會(huì)在代理對(duì)象進(jìn)行對(duì)應(yīng)操作時(shí)自動(dòng)觸發(fā)】

注：Proxy詳解見我另一篇文章： ES6之---Proxy簡(jiǎn)介 這里就不過多敘述了

// 寫法:target是目標(biāo)對(duì)象，handler是處理器對(duì)象
const proxy = new Proxy(target, handler);

簡(jiǎn)單示例

let star = {
name: '小明',
age: 18
}
let proxy = new Proxy(star,{
    get(targetObj, propoty, receiver) {
        console.log(`我是被代理的對(duì)象${targetObj}`)
        console.log(`我是你訪問的被代理的屬性${propoty}`)
        //receiver是代理對(duì)象proxy
        return targetObj[propoty]
    }
})

vue中defineProperty和proxy對(duì)比

1.監(jiān)聽數(shù)據(jù)的角度

• defineproperty只能監(jiān)聽某個(gè)屬性而不能監(jiān)聽整個(gè)對(duì)象。
• proxy不用設(shè)置具體屬性，直接監(jiān)聽整個(gè)對(duì)象。
• defineproperty監(jiān)聽需要知道是哪個(gè)對(duì)象的哪個(gè)屬性，而proxy只需要知道哪個(gè)對(duì)象就可以了。也就是會(huì)省去for in循環(huán)提高了效率。
• Object.defineProperty有一個(gè)致命的缺點(diǎn)，就是無法監(jiān)聽對(duì)象屬性的新增和刪除；可以使用this.$set和this.$delete解決，這個(gè)方法在項(xiàng)目中也經(jīng)常使用

2.監(jiān)聽對(duì)原對(duì)象的影響

• 因?yàn)?code>defineproperty是通過在原對(duì)象身上新增或修改屬性增加描述符的方式實(shí)現(xiàn)的監(jiān)聽效果，一定會(huì)修改原數(shù)據(jù)。
• 而proxy只是原對(duì)象的代理，proxy會(huì)返回一個(gè)代理對(duì)象不會(huì)在原對(duì)象上進(jìn)行改動(dòng)，對(duì)原數(shù)據(jù)無污染。

3.實(shí)現(xiàn)對(duì)數(shù)組的監(jiān)聽

• 因?yàn)閿?shù)組 length 的特殊性 (length 的描述符configurable 和 enumerable 為 false，并且妄圖修改 configurable 為 True 的話 js 會(huì)直接報(bào)錯(cuò)：VM305:1 Uncaught TypeError: Cannot redefine property: length)
• defineproperty無法監(jiān)聽數(shù)組長(zhǎng)度變化,Vue只能通過重寫數(shù)組方法的方式變現(xiàn)達(dá)成監(jiān)聽的效果，光重寫數(shù)組方法還是不能解決修改數(shù)組下標(biāo)時(shí)監(jiān)聽的問題，只能再使用自定義的$set的方式
• 而proxy因?yàn)樽陨硖匦?，是?chuàng)建新的代理對(duì)象而不是在原數(shù)據(jù)身上監(jiān)聽屬性，對(duì)代理對(duì)象進(jìn)行操作時(shí)，所有的操作都會(huì)被捕捉，包括數(shù)組的方法和length操作，再不需要重寫數(shù)組方法和自定義set函數(shù)了。(代碼示例在下方)

4. 監(jiān)聽的范圍

• defineproperty只能監(jiān)聽到value的 get set 變化。
• proxy可以監(jiān)聽除 [[getOwnPropertyNames]] 以外所有JS的對(duì)象操作。（鏈接看下方）監(jiān)聽的范圍更大更全面。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。