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的入门就讲到这了
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
,
