add ref and computed

Author: febobo

docs/.vuepress/config.js

@@ -44,12 +44,19 @@ module.exports = {
         title: "前置知识",
         collapsable: false,
         children: [
-          ["es6/", "proxy"],
+          ["es6/", "Proxy"],
           ["es6/dataStructure", "Set、Map、WeakSet、WeakMap"],
           ["es6/typeScript", "typeScript语法"],
           ["es6/spec", "spec语法"],
         ],
       },
+      {
+        title: "全局Api",
+        collapsable: false,
+        children: [
+          ["global/", "global"],
+        ],
+      },
       {
         title: "响应式系统",
         collapsable: false,
@@ -58,9 +65,13 @@ module.exports = {
           ["reactivity/", "整体概览"],
           ["reactivity/reactive", "reactive"],
           ["reactivity/reactive.spec", "reactive.spec"],
+          ["reactivity/ref", "ref"],
+          ["reactivity/ref.spec", "ref.spec"],
           ["reactivity/baseHandlers", "baseHandlers"],
           ["reactivity/effect", "effect"],
           ["reactivity/effect.spec", "effect.spec"],
+          ["reactivity/computed", "computed"],
+          ["reactivity/computed.spec", "computed.spec"],
         ],
       },
       {

docs/reactivity/index.md

@@ -1,10 +1,16 @@
 ### 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.
 
-前面又说到过，开始之前我们要理清楚各个文件之间的关系及作用，那么在我们即将要开始进入`reactive`之前，我们也来理一下整个`reactive`的文件结构
+大概意思是说这个包是内嵌到vue的渲染器中(@vue/runtime-dom)，但是它也可以单独发布或者被第三方引用，需要注意的是如果你是提供给第三方渲染器使用，其内部可能已经实现了响应机制，可能出现兼容问题
 
-```
+**为了后面阅读大家更容易阅读，开始之前我们需要理解各个文件之间的关系及用途**
+
+下方为整个`reactive`的文件结构
+
+```js
 .
 ├── LICENSE
 ├── README.md
@@ -24,12 +30,38 @@
 ├── index.js
 ├── package.json
 └── src
-    ├── baseHandlers.ts
-    ├── collectionHandlers.ts
-    ├── computed.ts
-    ├── effect.ts
+    ├── baseHandlers.ts // 基本类型的处理器
+    ├── collectionHandlers.ts  // Set Map WeakSet WeckMap的处理器
+    ├── computed.ts // 计算属性，同Vue2
+    ├── effect.ts // reactive 核心，处理依赖收集，依赖更新
     ├── index.ts
-    ├── operations.ts
-    ├── reactive.ts
-    └── ref.ts
-```
+    ├── operations.ts // 定义依赖收集，依赖更新的类型
+    ├── reactive.ts // reactive 入口，内部主要以Proxy实现
+    └── ref.ts // reactive 的变种方法，Proxy处理不了值类型的响应，Ref来处理
+```
+
+还为大家提供了整个 `reactive` 的流程图
+
+**整体流程** 
+
+<p>
+    <img  src="https://static.vue-js.com/c2344a60-cd86-11ea-ae44-f5d67be454e7.png" width="80%">
+</p>
+
+### 建议顺序阅读
+
+* [/reactivity/reactive](reactive) 
+* [/reactivity/baseHandlers](baseHandlers)  
+* [/reactivity/effect](effect)  
+* [/reactivity/ref](ref)   
+* [/reactivity/computed](computed) 
+
+<!-- **reactive 流程**
+<p>
+    <img  src="https://static.vue-js.com/0969ba10-cd90-11ea-ae44-f5d67be454e7.png" width="50%">
+</p>
+
+**ref 流程**
+<p>
+    <img  src="https://static.vue-js.com/244c65c0-cd91-11ea-ae44-f5d67be454e7.png" width="100%">
+</p> -->

docs/reactivity/reactive.md

@@ -16,7 +16,7 @@ Vue3中响应数据核心是 `reactive` ， `reactive` 中的实现是由 `proxy
 export function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
 export function reactive(target: object) {
   // if trying to observe a readonly proxy, return the readonly version.
-  // 如果传入了目标对象且目标对象为只读属性,则直接返回目标对象
+  // 如果目标对象是一个只读的响应数据,则直接返回目标对象
   if (target && (target as Target).__v_isReadonly) {
     return target
   }