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)
    }
})