SOURCE

let obj = { count: 0 }

Object.defineProperty(obj, 'count', {
    get() {
        console.log('get')
    },
    set(value) {
        console.log('======set======', value)
    }
})

console.log(obj.count)
obj.count = 3;


// Vue3把 目标对象变成 响应式对象

const _fsx = {
    name: "fsx",
    age: 22
}

// 获得代理对象
const proxyUser = new Proxy(_fsx, {
    // 获取目标对象的某个属性 
    get(target, prop) {
        console.log('代理对象的 get 调用',target,prop)
    },
    // 为目标对象添加新的属性 
    set(target,prop,value) { 
        console.log('代理对象的 set调用')
        return Reflect.set(target,prop,value)
    },
    // 删除目标对象上的某个属性
    deleteProperty(target,prop) {
        console.log('代理对象 deleteProperty 调用',target,prop)
     }
})
// 通过代理对象更新目标对象上的数据
proxyUser.name='####'
// 查看目标对象上的数据 目标数据并没有发生改变
console.log(_fsx)
// 通过代理对象向目标对象上添加新的 属性
proxyUser.gender='男'
// 通过代理对象删除 属性则目标对象上的属性 同时删除
delete proxyUser.name
console.log(_fsx)

/