fix: 目录错误

Author: 57code

README.md

@@ -15,14 +15,14 @@
 3. [能说说双向绑定以及它的实现原理吗？](public/03-v-model/README.md)
 4. [你了解diff算法吗？](public/04-diff/README.md)
 5. [vue中组件之间的通信方式？](public/05-communication/README.md)
-6. [简单说一说你对vuex理解？](public/06/README.md)
-7. [vue-router中如何保护路由？](public/07/README.md)
-8. [你了解哪些Vue性能优化方法？](public/08/README.md)
-9. [你知道nextTick吗，它是干什么的，实现原理是什么？](public/09/README.md)
+6. [简单说一说你对vuex理解？](public/06-vuex/README.md)
+7. [vue-router中如何保护路由？](public/07-route-guard/README.md)
+8. [你了解哪些Vue性能优化方法？](public/08-vue-perf/README.md)
+9. [你知道nextTick吗，它是干什么的，实现原理是什么？](public/09-nextTick/README.md)
 10. [说一说你对vue响应式理解？](public/10-reactivity/README.md)
 11. [你如果想要扩展某个Vue组件时会怎么做？](public/11-component-extends/README.md)
-12. [nextTick实现原理](public/12/README.md)
-13. [Vue2和Vue3中的响应式原理对比，分别的具体实现思路](public/13/README.md)
+12. [nextTick实现原理](public/12-nextTick-v2/README.md)
+13. [Vue2和Vue3中的响应式原理对比，分别的具体实现思路](public/13-reactivity-v2vsv3/README.md)
 14. [说说 vue2/vue3 的生命周期异同](public/20-lifecycle/README.md)
 15. [watch和computed的区别以及怎么选用?](public/15-watch-computed/README.md)
 16. [说一下父组件和子组件创建和挂载顺序](public/16-create-mount/README.md)

public/21-cache-comp/README.md

@@ -0,0 +1,88 @@
+## 怎么缓存当前的组件？缓存后怎么更新？
+
+缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多。
+
+
+### 思路
+
+1. 缓存用keep-alive，它的作用与用法
+2. 使用细节，例如缓存指定/排除、结合router和transition
+3. 组件缓存后更新可以利用activated或者beforeRouteEnter
+4. 原理阐述
+
+---
+
+### 回答范例
+
+1. 开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
+
+   ```vue
+   <keep-alive>
+     <component :is="view"></component>
+   </keep-alive>
+   ```
+
+2. 结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是`keep-alive`包裹`router-view`，现在需要反过来用`router-view`包裹`keep-alive`：
+
+   ```vue
+   <router-view v-slot="{ Component }">
+     <keep-alive>
+       <component :is="Component"></component>
+     </keep-alive>
+   </router-view>
+   ```
+
+---
+
+3. 缓存后如果要获取数据，解决方案可以有以下两种：
+
+   - beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行`beforeRouteEnter`
+
+     ```js
+     beforeRouteEnter(to, from, next){
+       next(vm=>{
+         console.log(vm)
+         // 每次进入路由执行
+         vm.getData()  // 获取数据
+       })
+     },
+     ```
+
+   - actived：在`keep-alive`缓存的组件被激活的时候，都会执行`actived`钩子
+
+     ```js
+     activated(){
+     	  this.getData() // 获取数据
+     },
+     ```
+
+---
+
+4. keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。
+
+   
+
+---
+
+
+### 知其所以然
+
+KeepAlive定义
+
+https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L73-L74
+
+缓存定义
+
+https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L102-L103
+
+缓存组件
+
+https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L215-L216
+
+获取缓存组件
+
+https://github1s.com/vuejs/core/blob/HEAD/packages/runtime-core/src/components/KeepAlive.ts#L241-L242
+
+
+
+测试缓存特性，test-v3.html

public/22-template-render/README.md

@@ -0,0 +1,41 @@
+## 说说从 template 到 render 处理过程
+
+### 分析
+
+问我们template到render过程，其实是问vue`编译器`工作原理。
+
+
+
+### 思路
+
+1. 引入vue编译器概念
+2. 说明编译器的必要性
+3. 阐述编译器工作流程
+
+---
+
+### 回答范例
+
+1. Vue中有个独特的编译器模块，称为“compiler”，它的主要作用是将用户编写的template编译为js中可执行的render函数。
+2. 之所以需要这个编译过程是为了便于前端程序员能高效的编写视图模板。相比而言，我们还是更愿意用HTML来编写视图，直观且高效。手写render函数不仅效率底下，而且失去了编译期的优化能力。
+3. 在Vue中编译器会先对template进行解析，这一步称为parse，结束之后会得到一个JS对象，我们成为抽象语法树AST，然后是对AST进行深加工的转换过程，这一步成为transform，最后将前面得到的AST生成为JS代码，也就是render函数。
+
+---
+
+### 知其所以然
+
+vue3编译过程窥探：
+
+https://github1s.com/vuejs/core/blob/HEAD/packages/compiler-core/src/compile.ts#L61-L62
+
+
+
+测试，test-v3.html
+
+
+
+### 可能的追问
+
+1. Vue中编译器何时执行？
+2. react有没有编译器？
+