带你阅读Vue3.0响应式系统源码5-总结

本文总结了Vue3.0响应式系统的架构,包括整体文件结构和代码组织。重点讨论了数据代理的实现,如懒代理和原生数据与代理数据的关系。还阐述了响应过程,如依赖的添加与解绑,以及依赖关系存储结构的构建。文章是Vue3.0响应式系统源码系列的最后一篇。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.整个响应式系统的架构

1)整体的文件结构
baseHandlers.ts         // 基础型对象代理handlers
collectionHandlers.ts   // 容器型对象代理handlers
computed.ts             // 计算选项处理,由于computed选项最后会处理成为一个响应式数据
effect.ts               // 影响因子处理文件
index.ts									
lock.ts                 // 锁操作
operations.ts           // 定义getter、setter操作枚举类
reactive.ts             // 响应式接口封装文件
ref.ts                  // ref对象
2)在代码组织上是怎么样的?
  1. 辅助类代码:operations.tslock.ts并没有业务逻辑,一些常量或者状态的存储,主要是为handlers服务。
  2. 影响因子Effecteffect.ts,提供Effect实例,effect实例观察者和数据之间互相绑定的桥梁。
  3. 响应对象的代理方法处理:baseHandlers.ts(处理ObjectArray)、collectionHandlers.ts(处理容器MapWeakMapSetWeakSet),这两个文件为reactive.ts里面的构建响应型对象提供handler
  4. 响应型对象的生成:reactive.ts提供可读可写、只读、浅代理只读三种代理方式的接口。
  5. ref对象是在reactive方法上面封装的一层,给用户接口定义响应型数据。
  6. computed是在effect的基础上进行构建的一类观察者,最后处理成数据。

2.整个系统的注意点

1)数据代理
  1. Proxy代理是不会对原生数据进行任何处理,处理数据的时候需要用到Reflect反射。
  2. 用户拿到的数据永远是代理后的数据,但是框架内部有时候需要用到原生数据,所以需要有WeakMap结构去维持关系;实际上代理数据父子关系之间的转换需要通过对象的数据来进行转换,但是一般代码上不会提现到。
  3. 对数据的代理是利用懒代理方式,这样能够把数据代理的负担分配到Vue实例对象整个生命周期中,可以减少初始化时间。
  4. 代理关系以及原生对象和代理对象的转换Map是使用闭包进行存储,用户访问不到。
2)响应过程
  1. Effect在初始化的时候,如果不是lazy类型的话,会顺便进行执行,此时的目的是进行依赖的添加。
  2. Effect实例在进行执行的时候,会先将该实例所绑定的数据进行解绑,再在执行的时候进行绑定。这样做的目的就是为了对新添加进来的属性进行监听,对已经除去的属性进行解绑
  3. Effect的执行不再只是使用微观队列进行执行,而有更多的选择,可以由创建实例者进行决定。
3)依赖关系存储结构
  1. 依赖关系的构建是在全局中不断构建起来的,这是由懒代理决定的。
  2. 具体的构建过程请查看附录2

3.系列传送门

带你阅读Vue3.0响应式系统系列源码1-绪论

带你阅读Vue3.0响应式系统源码2-对象及数据结构分析

带你阅读Vue3.0响应式系统源码3-响应型数据诞生

带你阅读Vue3.0响应式系统源码4-依赖绑定以及触发依赖的执行策略

带你阅读Vue3.0响应式系统源码5-总结

[附录1]Vue3.0响应数据对象的构建过程

[附录2]Vue3.0代理如何对数组的原生方法进行观察

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值