|
1 | 1 | ### reactivie 整体概览 |
2 | 2 |
|
| 3 | +先看一眼官方对 `reactivie` 的定义 |
3 | 4 |
|
| 5 | +> 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. |
4 | 6 | |
5 | | -前面又说到过,开始之前我们要理清楚各个文件之间的关系及作用,那么在我们即将要开始进入`reactive`之前,我们也来理一下整个`reactive`的文件结构 |
| 7 | +大概意思是说这个包是内嵌到vue的渲染器中(@vue/runtime-dom),但是它也可以单独发布或者被第三方引用,需要注意的是如果你是提供给第三方渲染器使用,其内部可能已经实现了响应机制,可能出现兼容问题 |
6 | 8 |
|
7 | | -``` |
| 9 | +**为了后面阅读大家更容易阅读,开始之前我们需要理解各个文件之间的关系及用途** |
| 10 | + |
| 11 | +下方为整个`reactive`的文件结构 |
| 12 | + |
| 13 | +```js |
8 | 14 | . |
9 | 15 | ├── LICENSE |
10 | 16 | ├── README.md |
|
24 | 30 | ├── index.js |
25 | 31 | ├── package.json |
26 | 32 | └── src |
27 | | - ├── baseHandlers.ts |
28 | | - ├── collectionHandlers.ts |
29 | | - ├── computed.ts |
30 | | - ├── effect.ts |
| 33 | + ├── baseHandlers.ts// 基本类型的处理器 |
| 34 | + ├── collectionHandlers.ts// Set Map WeakSet WeckMap的处理器 |
| 35 | + ├── computed.ts// 计算属性,同Vue2 |
| 36 | + ├── effect.ts// reactive 核心,处理依赖收集,依赖更新 |
31 | 37 | ├── index.ts |
32 | | - ├── operations.ts |
33 | | - ├── reactive.ts |
34 | | - └── ref.ts |
35 | | -``` |
| 38 | + ├── operations.ts // 定义依赖收集,依赖更新的类型 |
| 39 | + ├── reactive.ts // reactive 入口,内部主要以Proxy实现 |
| 40 | + └── ref.ts // reactive 的变种方法,Proxy处理不了值类型的响应,Ref来处理 |
| 41 | +``` |
| 42 | + |
| 43 | +还为大家提供了整个 `reactive` 的流程图 |
| 44 | + |
| 45 | +**整体流程** |
| 46 | + |
| 47 | +<p> |
| 48 | + <img src="https://static.vue-js.com/c2344a60-cd86-11ea-ae44-f5d67be454e7.png" width="80%"> |
| 49 | +</p> |
| 50 | + |
| 51 | +### 建议顺序阅读 |
| 52 | + |
| 53 | +* [/reactivity/reactive](reactive) |
| 54 | +* [/reactivity/baseHandlers](baseHandlers) |
| 55 | +* [/reactivity/effect](effect) |
| 56 | +* [/reactivity/ref](ref) |
| 57 | +* [/reactivity/computed](computed) |
| 58 | + |
| 59 | +<!-- **reactive 流程** |
| 60 | +<p> |
| 61 | + <img src="https://static.vue-js.com/0969ba10-cd90-11ea-ae44-f5d67be454e7.png" width="50%"> |
| 62 | +</p> |
| 63 | + |
| 64 | +**ref 流程** |
| 65 | +<p> |
| 66 | + <img src="https://static.vue-js.com/244c65c0-cd91-11ea-ae44-f5d67be454e7.png" width="100%"> |
| 67 | +</p> --> |
0 commit comments