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

最新推荐文章于 2024-11-18 09:00:00 发布

Weybn

最新推荐文章于 2024-11-18 09:00:00 发布

阅读量341

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 源码 Vue3.0响应式系统源码解读文章标签： typescript vue.js

本文链接：https://blog.youkuaiyun.com/Ancecis/article/details/104419631

Vue 同时被 3 个专栏收录

15 篇文章

订阅专栏

源码

13 篇文章

订阅专栏

Vue3.0响应式系统源码解读

4 篇文章

订阅专栏

本文总结了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）在代码组织上是怎么样的？

辅助类代码：operations.ts、lock.ts并没有业务逻辑，一些常量或者状态的存储，主要是为handlers服务。
影响因子Effect：effect.ts，提供Effect实例，effect实例观察者和数据之间互相绑定的桥梁。
响应对象的代理方法处理：baseHandlers.ts（处理Object、Array）、collectionHandlers.ts(处理容器Map、WeakMap、Set、WeakSet)，这两个文件为reactive.ts里面的构建响应型对象提供handler。
响应型对象的生成：reactive.ts提供可读可写、只读、浅代理只读三种代理方式的接口。
ref对象是在reactive方法上面封装的一层，给用户接口定义响应型数据。
computed是在effect的基础上进行构建的一类观察者，最后处理成数据。

2.整个系统的注意点

1）数据代理

Proxy代理是不会对原生数据进行任何处理，处理数据的时候需要用到Reflect反射。
用户拿到的数据永远是代理后的数据，但是框架内部有时候需要用到原生数据，所以需要有WeakMap结构去维持关系；实际上代理数据父子关系之间的转换需要通过对象的数据来进行转换，但是一般代码上不会提现到。
对数据的代理是利用懒代理方式，这样能够把数据代理的负担分配到Vue实例对象整个生命周期中，可以减少初始化时间。
代理关系以及原生对象和代理对象的转换Map是使用闭包进行存储，用户访问不到。

2）响应过程

Effect在初始化的时候，如果不是lazy类型的话，会顺便进行执行，此时的目的是进行依赖的添加。
Effect实例在进行执行的时候，会先将该实例所绑定的数据进行解绑，再在执行的时候进行绑定。这样做的目的就是为了对新添加进来的属性进行监听，对已经除去的属性进行解绑。
Effect的执行不再只是使用微观队列进行执行，而有更多的选择，可以由创建实例者进行决定。