一文了解Vue3的響應式原理

• 一、🟩回顧Object.defineProperty
• 二、🟨Proxy基本使用
• 三、🟦學習Proxy語法：Reflect
• 四、🟧Vue3如何用Proxy實現響應式
• • 1、實現響應式
  • 2、Proxy總結
  • • （1）深度監聽，性能更好
    • （2）可監聽 新增/刪除 屬性
    • （3）可監聽數組變化
  • 3、兩者對比
• 五、🟪結束語

之前寫過一篇文章談論 vue2.x 的響應式原理，但因為 vue3 也來了，緊跟著 vue3 的步伐，周一開始學起了 vue3 的響應式原理。

大家應該都聽過， vue3 用 proxy 來解決響應式原理，同時它解決了 vue2 中 Object.definePropery 存在的一些問題，但同時也帶來了一些問題。

在下面的這篇文章中，將講解關于 vue3 用 proxy 如何實現響應式，以及帶來的一些問題。一起來學習吧💯

一、🟩回顧Object.defineProperty

這里需要大家對 ObjectProperty 的知識點有一個預先了解，如有需要了解可點擊文章進行查看~

現在，我們來回顧下 Object.defineProperty 的缺點：

• 深度監聽時需要一次性遞歸；
• 無法監聽新增屬性/刪除屬性（需要配合 Vue.set 或 Vue.delete 使用）；
• 無法原生監聽數組，需要特殊處理。

帶著 Object.defineProperty 的這幾個缺點，接下來我們開始進入 Proxy 的世界。

二、🟨Proxy基本使用

下面用一段代碼來演示 Proxy 的基本使用。具體代碼如下：

const data = {name: 'monday',age:18 } //const data = ['a', 'b', 'c']const proxyData = new Proxy(data, {get(target, key, receiver){//只處理本身(非原型的)屬性const ownKeys = Reflect.ownKeys(target)if(oenKeys.includes(key)){console.log('get', key) //監聽}const result = Reflect.get(target, key, receiver)return result // 返回結果},set(target, key, val, receiver){//重復的數據，不處理if(val === target[key]){return true}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)//console.log('result', result) //truereturn result // 是否設置成功},deleteProperty(target, key){const result = Reflect.deleteProperty(target, key)console.log('delete property', key)return result // 是否刪除成功} })

通過以上代碼可得，我們先定義一個對象字面量的 data ，之后在作為 Proxy 實例化的參數進行傳遞。且 proxyData 實現了 get 、 set 和 deleteProperty 的方法，可以對數據進行增刪改操作。

三、🟦學習Proxy語法：Reflect

我們再來認識 Proxy 的一個好朋友，Reflect。

Reflect 對象有著和 Proxy 一一對應的能力，Reflect對象一共有 13 個靜態方法，這也就是我們平常所聽到的 proxy 有多達13種攔截行為，而 Reflect 的這13種靜態方法匹配的就是 Proxy 的13種攔截行為 。

靜態方法列表

Reflect.get(target, name, receiver)

Reflect.set(target, name, value, receiver)

Reflect.has(obj, name)

Reflect.deleteProperty(obj, name)

Reflect.construct(target, args)

Reflect.getPrototypeOf(obj)

Reflect.setPrototypeOf(obj, newProto)

Reflect.apply(func, thisArg, args)

Reflect.defineProperty(target, propertyKey, attribute)

Reflect.getOwnPropertyDescriptor(target, propertyKey)

Reflect.isExtensible(target)

Reflect.preventExtensions(target)

Reflect.ownKeys(target)

Reflect 的出現是為了替換掉 Object 上的工具函數，這里不做具體介紹，詳情可查看文檔 。

四、🟧Vue3如何用Proxy實現響應式

1、實現響應式

下面來實現Proxy的響應式。附上代碼：

// 創建響應式 function reactive(target = {}) {if (typeof target !== 'object' || target == null) {// 不是對象或數組，則返回return target}// 代理配置const proxyConf = {get(target, key, receiver) {// 只處理本身（非原型的）屬性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 監聽}const result = Reflect.get(target, key, receiver)// 深度監聽return reactive(result)},set(target, key, val, receiver) {// 重復的數據，不處理if (val === target[key]) {return true}const ownKeys = Reflect.ownKeys(target)// 判斷是已有屬性還是新增屬性if (ownKeys.includes(key)) {console.log('已有的 key', key)} else {console.log('新增的 key', key)} const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)// console.log('result', result) // truereturn result // 是否設置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否刪除成功}}// 生成代理對象const observed = new Proxy(target, proxyConf)return observed }// 測試數據 const data = {name: 'monday',age: 18,info: {city: 'FuZhou',a: {b: {c: {d: {e: 100}}}}} }const proxyData = reactive(data)

我們在控制臺來驗證數據：

從上圖中可以看到，用 proxy 來實現響應式，如果遇到需要深度遞歸的數組時，它不會像 defineProperty 那樣深度遞歸，它會在什么時候 get ，什么時候再深度遞歸。本質上來講就是，你獲取到哪一層，那一層才會觸發響應式。你獲取不到的深層，它就不會觸發響應式。且從代碼中我們可以了解到， Proxy 在修改屬性時，如果數據是重復的，則不進行處理。如果數據不重復，再進行處理。這樣一來，就極大程度上提高了軟件的性能。

2、Proxy總結

現在來對上述Proxy的內容做一個總結：

（1）深度監聽，性能更好

defineProperty 是一次性遞歸完成；而 Proxy 是什么時候 get ，什么時候再深度遞歸。

（2）可監聽 新增/刪除 屬性

在 vue2 中， defineProperty 是無法新增/刪除屬性的，需要配合 Vue.set 和 Vue.delete 來使用，而在 Vue3 中， Proxy 可以新增和刪除屬性，無需進行特殊處理。

（3）可監聽數組變化

在 vue2 中，監聽數組變化是需要進行特殊處理，且只能一次性深度遞歸完成。而在 vue3 中，可以監聽數組變化，并且是什么時候get什么時候再遞歸，獲取不到的深層，不會觸發響應式。

3、兩者對比

講到這里，我們再把 vue2 中的 Object.defineProperty 和 vue3 中的 Proxy 做一個對比：

• Proxy 能良好的規避 Object.defineProperty 的問題；
• Proxy 無法兼容所有瀏覽器（如 IE11 ），且無法 polyfill 。

五、🟪結束語

從某種程度上來說， vue3 的 Proxy 確實帶來了一些好處，但同時也帶來了一些問題。正因為如此， vue2 的 Object.defineProperty 還會存在很長一段時間。所以，新技術的使用總會經過一個從試用階段到穩定階段的過程。

關于vue3的響應式原理講到這里就結束啦！如有疑問或文章有誤歡迎評論區留言或私信交流~

• 關注公眾號 星期一研究室 ，第一時間關注技術干貨，更多有趣的專欄待你解鎖~
• 如果這篇文章對你有用，記得 一鍵三連 再走哦！
• 我們下期見！🥂🥂🥂

總結

以上是生活随笔為你收集整理的vue2的响应式原理学“废”了吗？继续观摩vue3响应式原理Proxy的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。