vue3 中的 proxyAPI
Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作。
Proxy 对象用于定义基本操作的自定义行为(如属性查找，赋值，枚举，函数调用等)
可以理解为在对象之前设置一个”拦截“，当监听的对象被访问的时候，都必须经过这层拦截。可以在这拦截中对原对象处理，返回需要的数据格式,也就是无论访问对象的什么属性，之前定义的或是新增的属性，都会走到拦截中进行处理。
-
new Proxy(target, handler)
target： Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler： 一个对象，其属性是当执行一个操作时定义代理的行为的函数。
handler 本身就是ES6所新设计的一个对象.它的作用就是用来自定义代理对象的各种可代理操作。
它本身一共有13中方法,每种方法都可以代理一种操作，常用的几种方法如下:
// 在定义代理对象某个属性时的属性描述时触发该操作
// 比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
handler.defineProperty()
// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()
// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()
// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()
// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()
// 在获取代理对象的所有属性键时触发该操作
// 比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()
// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()
// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作
// 比如在执行new proxy() 时。
handler.construct()
-
Reflect
Reflect是内置对象，为操作对象而提供的新API,将Object对象的属于语言内部的方法放到Reflect对象上,即从Reflect对象上拿Object对象内部方法。 如果出错将返回false
Reflect.set
Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。
Reflect.get
Reflect.get方法查找并返回target对象的name属性，如果没有该属性，则返回undefined。
-
proxy 监听简单的对象
let obj = {
name:'zhu'
}
let handler = {
get(obj,key){
console.log('读取')
return Reflect.get(obj,key)
},
set(obj,key,value){
console.log('更新视图')
Reflect.set(obj,key,value)
}
}
let proxy = new Proxy(obj,handler)
proxy.name='li' // 通过代理，调用set方法修改name值
console.log(proxy.name) // get方法读取
-
proxy 监听复杂的对象
let obj = {
name:'zhu',
info: {
address: '北京'
},
arr: [1,2,3]
}
let handler = {
get(obj,key){
//递归
if(typeof obj[key] === 'object' && typeof obj[key] !== null)
return new Proxy(obj[key],handler)
console.log('读取')
return Reflect.get(obj,key)
},
set(obj,key,value){
console.log('更新')
Reflect.set(obj,key,value)
}
}
let proxy = new Proxy(obj,handler)
proxy.info.address='上海' // 通过代理，调用get读取info，然后调用set方法修改address值
-
proxy 监听数组
proxy.arr.push(4)
// 调用两次set，
// 第一次修改数组的长度
// 第二次把元素放进数组里
// 代码同上
set (obj,key,value) {
let oldValue = obj[key]
console.log(key, oldValue, value)
// 数组不存在这个属性，直接新增
if(!oldValue){
console.log('新增属性')
}else if(oldValue !== value){
// 数组存在这个属性，修改属性
console.log('修改属性')
}
return Reflect.set(target,key,value)
}
