proxy
注意点:
- 返回值
- set 和 deleteProperty 中需要返回布尔类型的值
- receiver
- Proxy 中 receiver:Proxy 或者继承 Proxy 的对象
- Reflect 中 receiver:如果 target 对象中设置了 getter,getter 中的 this 指向 receiver
- proxy代理的是对象,definedProperty代理的是属性
模拟reactive, effect, track, trigger, ref, toRefs, toProxyRef, coputed
重要的点:
vue2 vue3 比较
相同点:
- 在getter 中收集依赖,setter中触发依赖
- 在初始化对象的时候,都要经历一步:先保存watcher到一个全局变量中,再调用getter函数将watcher添加到集合中,再释放这个全局变量
- trigger函数就和Dep类中的notify所做的事情相同,遍历通知观察者,调用update方法更新
- effect函数做的事情是watcher 中 constructor 中后面一步做的事情相同,activeEffect 和 Dep.target的作用相同
- track函数做的事情和defineProperty中getter做的事情相同,将观察者放入容器,以便后面统一触发
- ref函数做的事情和proxy做的事情相同,不同的是它用来处理非对象类型数据
- computed 的逻辑理不清楚
不同点
- 多了deleteProperty,在deleteProperty中也要触发依赖
- toRefs函数用来在解构数据时,将解构出来的数据用proxy初始化,实现响应式,这是3中的完全新增的功能