参考文档
<script>
let person = {
name: '高山我梦',
age: 20
}
let p = new Proxy(person, {})
</script>
简单地操作一下
这样是不是说完成了代理,我改源对象代理对象也改,我改代理对象源对象也改 👇👇👇
响应式就这么简单?不,这只是简单代理而已,还没有操作呢!
看Handler,也就是传进去的第二个值,是个配置对象,里面可写函数
那是不是访问一个数据这样就可以了?
let p = new Proxy(person, {
get(target, property, receiver) {
return target.property
}
})
不可以!因为property是个字符串!
console.log(typeof property);//string
是个字符串类型,所以不能对象.属性
改成这样就行了
let p = new Proxy(person, {
get(target, property, receiver) {
console.log('我是读取的逻辑哦');
return target[property]
}
})
也就能够在读取的时候加入逻辑 ,此时代理对象的handler也多了一个get,就是我添加进去的
set呢
第三个值就是传进来的新的值
set(target, property, value) {
console.log('我被修改了,传进来的值是', value);
}
修改就会触发,当然,这个set比vue2的set厉害,还可以增加,也会触发
写上逻辑就行了
set(target, property, value) {
console.log('我被修改或增加了,传进来的值是', value);
// 写上逻辑就行了
target[property] = value
}
既然删除增加修改都有了,那么删除呢
deleteProperty(target, property) {
console.log('要进行删除,删除的值为', property);
return delete target[property]
}