寫在前面
隨著vue3越來越被大家學習，關於proxy的使用也是不斷收到關注。proxy和object.defineproperty的對比也備受關注。這篇文章適合有vue開發經驗的同學閱讀。
回顧object.defineproperty
在vue2.x版本中，是通過object.defineproperty進行雙向資料繫結的，接下來看一下object.defineproperty是如何進行雙向繫結的。接下來簡單實現一下。
function observe(obj)
}}function definereactive(obj,key,value) :value是$`)
return value
},set:function (v) 資料改變了`)
value = v}})
}let obj = ,
interest: ['火鍋', '旅遊'],
問題一：object.defineproperty無法監聽增加或刪除的屬性
我們知道object.defineproperty無法監聽增加或者刪除的屬性，
在我們使用vue2.x中，增加屬性我們一般會通過$set的方法進行操作，$set內部也是通過使用object.defineproperty實現的
問題二：object.defineproperty無法監聽到陣列的變化
從上面的中我們可以看到修改陣列中的值是可以的，但是不能被監聽到，輸出的interest陣列還是改之前的陣列
問題三：如果物件的層級很多的情況下，不斷的遞迴，會導致時間過長，影響效能
回顧proxy
vue3的版本中，採用了proxy的方式。mdn 中的定義如下：
物件用於定義基本操作的自定義行為（如屬性查詢、賦值、列舉、函式呼叫等）
簡單來說就是，對目標物件設定一層攔截，任何對這個物件的操作都會經常這層攔截。這就相當於axios的***。
接下來寫個案例，理解一下proxy
function observerproxy(obj)
return reflect.get(target, key, receiver)
},
set(target, key, value, receiver)
} return new proxy(obj, handler)
} let obj = ,
interest: ['火鍋', '旅遊'],
運算元組的時候也會監聽到
操作物件屬性中是物件的時候也會監聽到
比較兩者的區別
通過上面的**，我們不難看出來它們的區別，proxy還是很強大的，有11種方法。能夠處理object.defineproperty這個方法中無法處理的。
proxy的處理場景
負索引陣列
在使用splice(-1)和slice(-1)等api的時候，當輸入的是負數時，會自動定位到陣列的尾部最後一項，但是在普通的陣列中，負數是不能用的。
let arr = [1,2,3]
console.log(arr.splice(-1)) // [3]
console.log(arr[-1]) // undefined
這種情況下我們可以通過建立乙個proxy物件，進行控制返回值
function arrproxy(params) else
let index = len + number(key) // key是字串
return target[index]
}} else if (typeof target === 'object' && target !== null) }}
return new proxy(params,handler)
}let arr = [1,2,3,4,5,6]
let testarr = arrproxy(arr)
console.log(testarr[-1]) // 6
表單校驗
在對於表單的驗證上，當使用者修改表單中的資料時，可通過proxy進行設定攔截。
舉個例子：
function validfrom(formobj) else }}
}return new proxy(formobj,handler)
}let form =
let testform = validfrom(form)
testarr.age = 60 // '請輸入準確的值'
根據使用者輸入值，解析儲存
資料格式化
資料格式化，相對來說好理解一些。當後台返回介面資料不是我們想要的格式時，我們可以通過修改設定成我們想要的格式。這裡就不再舉例了贅述了。
SAP BTP MTA 應用的應用場景
程式語言 軟體設計架構 如微服務 協議 如 odata 的最新趨勢和進展，以及多層和分布式部署平台的多樣性，加速了由更多 更小 解耦和多樣化的模組構建應用程式的趨勢。在微服務架構下，越來越多的業務應用程式傾向於由使用不同語言和技術開發並部署到各種目標執行時環境的多個部分組成。這種應用程式模組的多樣性...
Redis應用場景
redis開創了一種新的資料儲存思路，使用redis，我們不用在面對功能單調的資料庫時，把精力放在如何把大象放進冰箱這樣的問題上，而是利用redis靈活多變的資料結構和資料操作，為不同的大象構建不同的冰箱。redis常用資料型別 redis最為常用的資料型別主要有以下五種 在具體描述這幾種資料型別之...
Redis應用場景
redis開創了一種新的資料儲存思路，使用redis，我們不用在面對功能單調的資料庫時，把精力放在如何把大象放進冰箱這樣的問題上，而是利用redis靈活多變的資料結構和資料操作，為不同的大象構建不同的冰箱。redis常用資料型別 redis最為常用的資料型別主要有以下五種 在具體描述這幾種資料型別之...