Vue3响应式数据的核心原理
// 目标对象
const user = {
name: '追风的栗子',
age: 20,
wife: {
name: '小栗子',
age: 19
}
}
// 把目标对象变成代理对象
// 参数1:user---->target目标对象
// 参数2:handler---->处理器对象,用来监视数据,及数据的操作
const proxyUser = new Proxy(user, {
// 获取目标对象的某个属性值
get(target, prop) {
console.log('get方法调用了')
return Reflect.get(target, prop)
},
// 修改目标对象的属性值/为目标对象添加新的属性
set(target, prop, val) {
console.log('set方法调用了')
return Reflect.set(target, prop, val)
},
// 删除目标对象上的某个属性
deleteProperty(target, prop) {
console.log('delete方法调用了')
return Reflect.deleteProperty(target,prop)
}
})
// 通过代理对象获取目标对象中的某个属性值
console.log(proxyUser.name)
// 通过代理对象更新目标对象上的某个属性值
proxyUser.name = '糖炒栗子'
console.log(user)
// 通过代理对象向目标对象中添加一个新的属性
proxyUser.gender = '男'
console.log(user)
delete proxyUser.name
console.log(user)
// 更新目标对象中的某个属性对象中的属性值
proxyUser.wife.name = '小赖'
console.log(user)
