proxy 代理配置（Proxy对象代理api简单入门）
Vue2实现响应式是利用了Object.defineProperty()，而到Vue3的时候实现响应式确改成了Proxy，今天小编就来聊一聊关于proxy 代理配置?接下来我们就一起去研究一下吧!
proxy 代理配置
前沿Vue2实现响应式是利用了Object.defineProperty()，而到Vue3的时候实现响应式确改成了Proxy
Vue为什么要这样做？主要在于Object.defineProperty()存在一些无法修复的缺陷
1、无法检测到对象的新增和删除
<div>{{userInfo}}</div>
data (){
return {
userInfo:{
name:'xxx'
}
}
},
created () {
this.userInfo.age = 222
}
// userInfo显示结果
// userInfo:{ "name": 'xxx' }
2、无法监听数组变化
<div>{{arr}}</div>
data (){
return {
arr:[1,2]
}
}
},
created () {
this.arr[0]=3
}
// arr显示结果
// arr:[1,2]
要解决的话，需要通过vue2的$set方法，比如
this.$set(this.userInfo,'age',222)
this.$set(this.arr,0,3)
但是proxy就能很好地解决这些问题
Proxy简介Proxy是对象的一个代理，可以实现基本操作的拦截和自定义
// target是要代理的对象
// handle是一个容纳一批特定属性的占位符对象
const p = new Proxy(target, handler)
看起来是不是有点懵，下面我们通过这个例子来入个门
const target={
a:1
}
const handler={
// get拦截
// 在这里可以做一些日志处理
// target代理的对象
// key为对象的属性
// 例如：p.a，那么target就是p，key就是a
get(target,key){
console.log(key '被获取了')
if(key in target){
return target[key]
}else{
return '我不知道'
}
},
// set拦截
// 在这里可以做一些日志处理
// target代理的对象
// key为对象的属性
// value是设置的值
// 例如：p.a=3，那么target就是p，key就是a，value就是3
set(target,key,value){
if(key in target){
console.log(`属性${key}被设置了新的值${value}`)
}else{
console.log(`添加了新的属性${key},值为${value}`)
}
target[key]=value
return true
},
// delete拦截
// 在这里可以做一些日志处理
// target代理的对象
// key为对象的属性
// 例如：delete p.a，那么target就是p，key就是a
deleteProperty(target,key){
if(key in target){
console.log(`属性${key}被删除了`)
}
delete target[key]
}
}
我们做一下简单的测试
const p = new Proxy(target, handler)
p.a // 输出1
p.b // 输出我不知道
p.a=3 // 输出属性a被设置了新的值3
p.b=6 // 输出添加了新的属性b,值为6
delete p.a // 输出属性a被删除了
delete p.b // 没有任何输出
好了Proxy的入门就讲到这了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
