Proxy简介
Proxy 也就是代理,它是window内置的函数,我们直接window.Proxy就可以使用
语法
// target: Proxy代理的源对象,可以是,对象,数组,函数,甚至是另一个Proxy
// handler: 这个值,可以不配置,但是不允许不写,至少写一个空对象,不然报错
const p = new Proxy(target,handler)
使用
let person = {
name: '景天',
age: 18
}
const p = new Proxy(person,{
// target代表源数据
// propName代表操作的那个属性名
get(target,propName) {
console.log(`有人读取了p身上的${propName}属性`)
return target[propName]
},
// value代表要修改的值
set(target,propName,value) {
console.log(`有人修改了p身上的${propName}属性,值为${value}`)
target[propName] = value
},
deleteProperty(target,propName)) {
console.log(`有人删除了p身上的${propName}属性`)
return delete target[propName]
}
})
Vue3中还使用啥
Vue3.0中对于值得操作还使用了Reflect
let person = {
name: '景天',
age: 18
}
const p = new Proxy(person,{
// target代表源数据
// propName代表操作的那个属性名
get(target,propName) {
console.log(`有人读取了p身上的${propName}属性`)
return Reflect.get(target,propName)
},
// value代表要修改的值
set(target,propName,value) {
console.log(`有人修改了p身上的${propName}属性,值为${value}`)
Reflect.set(target,propName,value)
},
deleteProperty(target,propName)) {
console.log(`有人删除了p身上的${propName}属性`)
return Reflect.deleteProperty(target,propName)
}
})