理解Proxy与Reflect
vue3的响应式离不开proxy,说到proxy则离不开reflect.这两个对象是es6新增的对象，同时在编程领域，他们也代表着2种设计模式，即代理与反射。
Proxy
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须经过这层拦截，而我们就可以通过这层拦截去改变目标对象的内容或者行为，或者叫过滤和控制。这个词本意就是代理，好比一个代理人站在神奇，我们所有行为都会被他过滤，可能我们说的话，经过代理人一说，意思就变了。
ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。
var proxy = new Proxy(target, handler);
其中target表示要代理的那个对象，handler则是表示我们需要拦截的行为,这里直接放一张阮一峰的截图。
立即学习“前端免费学习笔记（深入）”；
Reflect
Reflect中文译为：反射。如果说Proxy 是有一个代理人站在身前面，帮你拦截并处理一些行为，那么Reflect就是你身后的一面镜子，它能看见真实的自己。
而你自己，就是一个类或者对象，或者一个函数，只要是js中存在的，都能被Proxy 和 Reflect处理。
它的操作和Proxy正好相反，但却一一对应。比如我们获取对象中一个属性。
const obj = {foo:1}
const a = Reflect.get(obj, 'foo')这一小节主要是介绍了Proxy与Reflect，后面会有一个应用老告诉你为什么Proxy与Reflect与响应式数据息息相关。
《PHP设计模式》首先介绍了设计模式，讲述了设计模式的使用及重要性，并且详细说明了应用设计模式的场合。接下来，本书通过代码示例介绍了许多设计模式。最后，本书通过全面深入的案例分析说明了如何使用设计模式来计划新的应用程序，如何采用PHP语言编写这些模式，以及如何使用书中介绍的设计模式修正和重构已有的代码块。作者采用专业的、便于使用的格式来介绍相关的概念，自学成才的编程人员与经过更多正规培训的编程人员
实践示例
看完了Proxy与Reflect的基本使用之后，我们实践一下。
我们曾经写过这样的代码
const reactive = (object)=>{
return new Proxy(object,{
get(target,key){
track(target,key)
return target[key]
}
set(target,key, newVal){
target[key] = newVal
trigger(target,key)
return true
}
})
}其实就是用Proxy代理了对象读和取操作，在读的时候收集依赖，在取的时候触发响应。看起来似乎没有问题，那么我们再试继续往下写
const obj = {
a:1,
get b(){
return this.a
}
}
const data = reactive(obj)
effect(()=>{
console.log(data.b)
})
setTimeOut(()=>{
data.b++
},500)这里我们没有用一般的对象写法，而是通过访问器为它新增了一个b属性.之后，我们先把这个对象转换为响应式对象，再给他们设定一个响应式的回调，然后在冬天改变他的值，理论上这时候应该会执行副作用函数，但是实际上呢，根本不会执行。
我们回顾一下之前写的reactive方法，在里面返回的是target[key],当我们的target是obj，key是b的时候，那个this会是谁呢？因为target是原始对象，也就是obj，根据谁调用是谁的原则，这个this也就指向了obj。obj是响应式对象吗，显然不是，那个b也就永远不会执行副作用函数，响应式就失效了。
这里其实就是this的指向问题，你可能会说一般人怎么会用getter去赋值属性呢，但是这个作为一个简单的case，甚至都算不上边界，我们需要解决它。
解决的方法也很简单，就是通过Reflect。这也是为什么我说Proxy与Reflect就是焦不离孟 孟不离焦. 我们的reactive，get的时候，加入第三个参数receiver
get(target,key){
track(target,key,receiver)
return Reflect.get(target,key,receiver)
}我这里理解的是，receiver就相当于函数的bind方法，它改变的this的执行，当我们同过Reflect读取值的时候，this的指向被改为receiver，而Reflect时的receiver又是Proxy中的入参，它执行了这个Proxy，从而把前文中this的指向由obj改为data,这样响应式就不会丢失了。
