reactivie 整体概览

先看一眼官方对 reactivie 的定义

This package is inlined into Global & Browser ESM builds of user-facing renderers (e.g. @vue/runtime-dom), but also published as a package that can be used standalone. The standalone build should not be used alongside a pre-bundled build of a user-facing renderer, as they will have different internal storage for reactivity connections. A user-facing renderer should re-export all APIs from this package.

大概意思是说这个包是内嵌到vue的渲染器中(@vue/runtime-dom)，但是它也可以单独发布或者被第三方引用，需要注意的是如果你是提供给第三方渲染器使用，其内部可能已经实现了响应机制，可能出现兼容问题

为了后面阅读大家更容易阅读，开始之前我们需要理解各个文件之间的关系及用途

下方为整个reactive的文件结构

  1. .
  2. ├── LICENSE
  3. ├── README.md
  4. ├── __tests__  // 单元测试目录
  5. │   ├── collections
  6. │   │   ├── Map.spec.ts
  7. │   │   ├── Set.spec.ts
  8. │   │   ├── WeakMap.spec.ts
  9. │   │   └── WeakSet.spec.ts
  10. │   ├── computed.spec.ts
  11. │   ├── effect.spec.ts
  12. │   ├── reactive.spec.ts
  13. │   ├── reactiveArray.spec.ts
  14. │   ├── readonly.spec.ts
  15. │   └── ref.spec.ts
  16. ├── api-extractor.json
  17. ├── index.js
  18. ├── package.json
  19. └── src
  20.     ├── baseHandlers.ts // 基本类型的处理器
  21.     ├── collectionHandlers.ts  // Set Map WeakSet WeckMap的处理器
  22.     ├── computed.ts // 计算属性，同Vue2
  23.     ├── effect.ts // reactive 核心，处理依赖收集，依赖更新
  24.     ├── index.ts
  25.     ├── operations.ts // 定义依赖收集，依赖更新的类型
  26.     ├── reactive.ts // reactive 入口，内部主要以Proxy实现
  27.     └── ref.ts // reactive 的变种方法，Proxy处理不了值类型的响应，Ref来处理

还为大家提供了整个 reactive 的流程图

整体流程

reactivie 整体概览 - 图1

建议顺序阅读