Proxy簡介
Proxy 也就是代理，它是window內(nèi)置的函數(shù)幽邓，我們直接window.Proxy就可以使用
語法
// target: Proxy代理的源對象彤蔽，可以是剥汤，對象失球，數(shù)組，函數(shù)行您，甚至是另一個Proxy
// handler: 這個值，可以不配置剪廉，但是不允許不寫娃循，至少寫一個空對象，不然報錯
const p = new Proxy(target,handler)
使用
let person = {
name: '景天',
age: 18
}
const p = new Proxy(person,{
// target代表源數(shù)據(jù)
// 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代表源數(shù)據(jù)
// 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)
}
})
