From e94d5ad0ab1ea708d483ea06cbc8a0dce2954a5a Mon Sep 17 00:00:00 2001
From: shine <791405318@qq.com>
Date: Sat, 10 Dec 2022 19:43:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=96=87=E6=A1=A3=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/.vuepress/config.ts                    | 24 ++++++++++-----
 docs/guide/README.md                        |  7 ++++-
 docs/{guide => reactive}/introduction.md    |  0
 docs/reactive/reactive.md                   | 28 +++++++++++++++++
 docs/{guide/reactive.md => reactive/ref.md} | 33 +++++++++++----------
 docs/{guide => reactive}/reference.md       |  0
 docs/reference/README.md                    | 15 ----------
 7 files changed, 67 insertions(+), 40 deletions(-)
 rename docs/{guide => reactive}/introduction.md (100%)
 create mode 100644 docs/reactive/reactive.md
 rename docs/{guide/reactive.md => reactive/ref.md} (94%)
 rename docs/{guide => reactive}/reference.md (100%)
 delete mode 100644 docs/reference/README.md

diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
index 6d8f9c8..7690dbc 100644
--- a/docs/.vuepress/config.ts
+++ b/docs/.vuepress/config.ts
@@ -10,15 +10,23 @@ export default defineUserConfig({
   description: "学习vue3源码，再造框架",
   theme: defaultTheme({
     repo: "https://github.com/TingShine/mini-vue3.git",
-    sidebar: [
+    sidebarDepth: 3,
+    sidebar:  [
       {
-        text: "介绍",
-        link: "/guide",
+        text: '介绍',
+        collapsible: true,
+        children: [
+          '/guide/readme.md'
+        ]
       },
-      {
-        text: "响应式",
-        link: "/guide/reactive",
-      },
-    ],
+        {
+          text: '响应式',
+          collapsible: true,
+          children: [
+            '/reactive/ref.md',
+            '/reactive/reactive.md'
+          ]
+        }
+      ]
   }),
 });
diff --git a/docs/guide/README.md b/docs/guide/README.md
index 305c864..f181685 100644
--- a/docs/guide/README.md
+++ b/docs/guide/README.md
@@ -1,3 +1,8 @@
-# 介绍
+# 项目介绍
 
 本文档是基于[mini-vue](https://github.com/cuixiaorui/mini-vue)框架进行源码学习，深入vue框架底层原理并进行剖析，尝试个人再造vue3框架甚至于添加新特性
+
+## 目录
+
+- 响应式
+  - [ref](/reactive/ref.md)
\ No newline at end of file
diff --git a/docs/guide/introduction.md b/docs/reactive/introduction.md
similarity index 100%
rename from docs/guide/introduction.md
rename to docs/reactive/introduction.md
diff --git a/docs/reactive/reactive.md b/docs/reactive/reactive.md
new file mode 100644
index 0000000..47da2d1
--- /dev/null
+++ b/docs/reactive/reactive.md
@@ -0,0 +1,28 @@
+# Reactive
+
+一般而言，数值、布尔值、字符串、数组变量的响应式使用`ref`，而对象的响应式使用`reactive`，可以深度检测内部对象的变更
+
+## 实现分析
+
+通过`reactive`双向绑定的vue文件样例，我们分析一下需要实现的功能特性
+
+```vue
+<template>
+  <input v-model:value="form.username" type="text" name="username" />
+  <input v-model:value="form.password" type="password" name="password" />
+</template>
+
+<script setup>
+import { reactive, watchEffect } from 'vue'
+const form = reactive({
+  username: '',
+  password: ''
+})
+watchEffect(() => {
+  console.log(form.username)
+  console.log(form.password)
+})
+</script>
+```
+
+从上述样例可以看出，`reactive`作为函数，参数为对象进行调用，返回一个变量，该变量仍然具有对象的特征
\ No newline at end of file
diff --git a/docs/guide/reactive.md b/docs/reactive/ref.md
similarity index 94%
rename from docs/guide/reactive.md
rename to docs/reactive/ref.md
index 4eb5439..a248f80 100644
--- a/docs/guide/reactive.md
+++ b/docs/reactive/ref.md
@@ -1,10 +1,8 @@
-# 响应式
+# Ref
 
 vue框架的核心特性之一就是响应式，vue是一个MVVM框架，即视图——模型双向绑定：更新数据，对应的视图随着更新；同时在视图更新，对应的数据模型也会随着更新。
 
-
-
-## Ref
+## 分析
 
 通过使用`ref`双向绑定的vue单文件样例，来分析响应式数据需要实现的功能特性：
 ```vue
@@ -33,9 +31,9 @@ watchEffect(() => {
 双向绑定可以通过`发布-订阅者`模式来实现，`.value`可以通过`class`的实例来实现，那么`ref()`函数返回的就是对应的实例
 :::
 
-### 创建RefImf类
+## 创建RefImf类
 
-1. 第一步实现`.value`的特性
+### 1. 实现`.value`的特性
 
 ``` typescript
 class RefImf {
@@ -55,7 +53,9 @@ class RefImf {
 }
 ```
 
-2. 第二步实现`value`值转化, 判断是否是`object`
+### 2. 实现`value`值转化
+
+ 判断是否是`object`
 
 ``` typescript{8-9,18}
 class RefImf {
@@ -80,7 +80,7 @@ class RefImf {
 }
 ```
 
-3. 第三步实现依赖收集
+### 3. 模拟依赖收集
 
 当获取值时，要将其获取请求者加入依赖列表中，当自身的值发生变化时进行逐一通知，也就是`发布者——订阅`模式
 
@@ -129,7 +129,7 @@ const createDep = (effects?: any) => {
 
 在代码中我们可以看到`trackRef`用于依赖收集，`triggerRef`用于在改变值的时候通知订阅者，映射到实际场景中就是在视图模板中引用到了数据的时候，响应式数据进行依赖收集，当数据变化时通知视图，视图改变数据时直接修改`RefImf`实例中的值
 
-### 依赖收集
+## 依赖收集和触发
 
 我们需要模拟在`vue`框架下实现双向绑定的过程，这里我们使用`effect`函数来暂时替代，通过在函数内运行模拟环境，具体示例如下：
 
@@ -141,7 +141,7 @@ effect(() => {
 
 要实现上述思路，需要我们在传入`effect`函数的参数也为函数`Fn`，在`Fn`运行前开始允许依赖收集，`Fn`结束后禁止依赖收集
 
-1. 创建`ReactiveEffect`类和`effect`函数
+### 1. 创建`ReactiveEffect`类和`effect`函数
 
 ```typescript
 class ReactiveEffect {
@@ -153,7 +153,7 @@ const effect = (fn: Function) => {
 }
 ```
 
-2. 模拟运行环境
+### 2. 模拟运行环境
 ```typescript{1,6-12,17}
 let shouldTrack = false
 
@@ -175,7 +175,7 @@ const effect = (fn: Function) => {
 }
 ```
 
-3. 判断是否可以添加依赖
+### 3. 判断是否可以添加依赖
 
 ```typescript{2,10,15,25-28}
 let shouldTrack = false;
@@ -208,7 +208,7 @@ const isTracking = () => {
 }
 ```
 
-4. 依赖收集
+### 4. 依赖收集
 
 ```ts{5,31-36,38-44}
 let shouldTrack = false;
@@ -263,7 +263,7 @@ const trackEffects = (dep: Set<any>) => {
 可以将`ReactiveEffec`的实例看作vue3中的`watchEffect`函数，其`deps`数组存放着响应性数据的依赖关系
 :::
 
-5. 触发依赖
+### 5. 触发依赖
 
 当响应式数据发生变化时，需要逐一通知其订阅者，运行对应的函数
 
@@ -326,7 +326,8 @@ export const triggerEffects = (dep: Set<any>) => {
 };
 ```
 
-6. 最后来个收尾之作，当不再需要进行触发依赖时（退出了环境）
+### 6. 收尾之作
+当不再需要进行触发依赖时（退出了环境）
 
 新增 `ReactiveEffect`类`active`成员变量进行控制
 
@@ -347,7 +348,7 @@ class ReactiveEffect {
 }
 ```
 
-### 单元测试
+## 单元测试
 
 ```ts
 import { effect } from "../effect";
diff --git a/docs/guide/reference.md b/docs/reactive/reference.md
similarity index 100%
rename from docs/guide/reference.md
rename to docs/reactive/reference.md
diff --git a/docs/reference/README.md b/docs/reference/README.md
deleted file mode 100644
index fa77169..0000000
--- a/docs/reference/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
----
-title: Home
-heroImage: /logo.png
-actions:
-  - text: Start
-    link: /guide/getting-started.html
-    type: primary
-  - text: Reference
-    link: /reference/
-    type: secondary
-features:
-  - title: 源码阅读
-    details: 文档对vue3的reactive、effect等特性进行阅读和解析
----
-# ces
\ No newline at end of file