我对 reactive源码的理解
reactive 只能够代理对象 首先它判断传递过来的值是否是对象，如果是才会进行代理。变成响应式的。 Proxy 并没有重写对象的属性，只做代理，在取值的时候回调用get,设置值的时候回调用set方法 在get的时候使用了 Reflect.get(target,key)方法 在set的时候使用了 Reflect.set(target,key,value)方法 为什么要这样做？因为这样可以保证this的指向是代理对象 let target = { name: 'zhangsan', get say() { console.log('返回的值',this.name) return this.name } } const proxy= new Proxy(target, { get(target, key) { console.log('取值这里也会被触发') return Reflect.get(target,key) }, set(target,key,value) { return Reflect.set(target, key,value) } }) console.log(proxy )
weakMap解决同一个对象被代理多次浪费性能
let state={ name:'xxx', age:123 } let state1=reactive(state) let state2=reactive(state) console.log( state1===state2 ) true 如果同一个对象被代理多次会浪费性能。 怎么处理这个问题呢？ 利用缓存，使用了 weakMap 为什么要使用了weakMap 呢？ weakMap是弱引用，不会造成内存泄漏 weakMap 和 map很像，但是weakMap的key只能够是对象 这样就实现了 同于一个对象被多次代理，返回同一个代理
代理的对象再次被代理
let state={ name:'xxx', age:123 } let state1=reactive(state) let state2=reactive(state1) 怎么解决这个问题了 代理对象被再次代理，可以直接返回，不需要代理了。 它最初是用了 IS_REACTIVE这个字段 会检测代理对象是否有这个字段，如果有，说明这个对象被代理了。 不再需要代理了，直接返回就可以了
vue3 性能方便的提升
1.ref API 的读效率提升 260%，写效率提升约为 50% 。 2.依赖收集的效率提升 40% 3.内存占用减少 17% 。
你对Proxy的理解
Proxy 对象用于创建一个对象的代理， 从而实现拦截和自定义（如属性查找、赋值、枚举、函数调用等） Proxy并不是深层代理，proxy只会代理第一层。 Vue3中reactive的实现，其实是递归的将对象全部都代理了一遍。
Proxy解决了什么问题
Object.defineProperty无法直接监听对象新增或删除的属性。Proxy可以。 Object.defineProperty我们无法让Map、Set这类数据类型转变为响应式，Proxy可以。
