chore: 整理格式

Author: 57code

README.md

@@ -18,15 +18,15 @@
 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)
+9. [你知道nextTick吗，它是干什么的，实现原理是什么？](public/09-nextTick-v3/README.md)
 10. [说一说你对vue响应式理解？](public/10-reactivity/README.md)
 11. [你如果想要扩展某个Vue组件时会怎么做？](public/11-component-extends/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)
+14. [说说 vue2/vue3 的生命周期异同](public/19-lifecycle/README.md)
 15. [watch和computed的区别以及怎么选用?](public/15-watch-computed/README.md)
 16. [说一下父组件和子组件创建和挂载顺序](public/16-create-mount/README.md)
-17. [vue组件为什么只能有一个根元素?](public/15-watch-computed/README.md)
+17. [vue组件为什么只能有一个根元素?](public/17-only-one-root/README.md)
 18. [你都知道哪些Vue3.0的新特性？](public/18-v3-feature/README.md)
 19. [简述 Vue 的生命周期以及每个阶段做的事](public/19-lifecycle/README.md)
 20. [说说你对虚拟 DOM 的理解？](public/20-vdom/README.md)

public/01-vif-vfor/README.md

@@ -1,22 +1,19 @@
 ## v-if和v-for哪个优先级更高？
 
-分析：此题考查常识，文档中曾有详细说明[v2](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81)|[v3](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。
+### 分析：
+此题考查常识，文档中曾有详细说明[v2](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7%E5%BF%85%E8%A6%81)|[v3](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)；也是一个很好的实践题目，项目中经常会遇到，能够看出面试者应用能力。
 
 
 
-思路分析：总分总模式
+### 思路分析：总分总模式
 
 1. 先给出结论
 2. 为什么是这样的
 3. 它们能放一起吗
 4. 如果不能，那应该怎样
 5. 总结
 
-
-
-
-
-回答范例：
+### 回答范例：
 
 1. 在 `Vue 2` 中，`v-for` 优先于 `v-if` 被解析；但在 `Vue 3` 中，则完全相反，`v-if` 的优先级高于 `v-for`。
 
@@ -35,10 +32,7 @@
 6. 看过源码里面关于代码生成的部分，
 
 
-
-
-
-知其所以然：
+### 知其所以然：
 
 在 `Vue 2` 中做个测试，[test.html](./test.html)
 两者同级时，渲染函数如下：

public/02-key/README.md

@@ -1,12 +1,13 @@
 ## 你知道key的作用吗？
 
-分析：这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次。
+### 分析：
+这是一道特别常见的问题，主要考查大家对虚拟DOM和patch细节的掌握程度，能够反映面试者理解层次。
 
 
 
 
 
-思路分析：总分总模式
+### 思路分析：总分总模式
 
 1. 给出结论，key的作用是用于优化patch性能
 2. key的必要性
@@ -17,7 +18,7 @@
 
 
 
-回答范例：
+### 回答范例：
 
 1. key的作用主要是为了更高效的更新虚拟DOM。
 2. vue在patch过程中**判断两个节点是否是相同节点是key是一个必要条件**，渲染一组列表时，key往往是唯一标识，所以如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕它们实际上不是，这导致了频繁更新元素，使得整个patch过程比较低效，影响性能。

public/03-v-model/README.md

@@ -1,36 +1,25 @@
 ## 能说说双向绑定以及它的实现原理吗？
 
-题目分析：双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。
+### 题目分析：
+双向绑定是vue的特色之一，开发中必然会用到的知识点，然而此题还问了实现原理，升级为深度考查。
 
-
-
-
-
-思路分析：3w1h
+### 思路分析：3w1h
 
 1. 给出双绑定义
 2. 双绑带来的好处
 3. 在哪使用双绑
 4. 使用方式
 5. 扩展：使用细节、原理实现描述
 
-
-
-
-
-回答范例：
+### 回答范例：
 
 1. vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。v-model是语法糖，默认情况下相当于:value和@input。
 2. 使用v-model可以减少大量繁琐的事件处理代码，提高开发效率，代码可读性也更好
 3. 通常在表单项上使用v-model
 4. 原生的表单项可以直接使用v-model，自定义组件上如果要使用它需要在组件内绑定value并处理输入事件
 5. 我做过测试，输出包含v-model模板的组件渲染函数，发现它会被转换为value属性的绑定以及一个事件监听，事件回调函数中会做相应变量更新操作，这说明神奇魔法实际上是vue的编译器完成的。
 
-
-
-
-
-可能的追问：
+### 可能的追问：
 
 1. v-model和sync修饰符有什么区别
 2. 自定义组件使用v-model如果想要改变事件名或者属性名应该怎么做

public/05-communication/README.md

@@ -3,13 +3,13 @@
 题目分析：vue是组件化开发框架，所以对于vue应用来说组件间的数据通信非常重要。此题主要考查大家vue基本功，对于vue基础api运用熟练度。另外一些边界知识如provide/inject/$attrs/$listeners则体现了面试者的知识面。
 
 
-思路分析：总分
+### 思路分析：总分
 
 1. 总述知道的所有方式
 2. 按组件关系阐述使用场景
 
 
-回答范例：
+### 回答范例：
 
 1. 组件通信方式大体有以下8种：
 

public/06-vuex/README.md

@@ -1,10 +1,11 @@
 ## 简单说一说你对vuex理解？
+![vuex](../assets/vuex.png)
+### 分析
+此题考查实践能力，能说出用法只能60分。更重要的是对vuex设计理念和实现原理的解读。
 
-分析：此题考查实践能力，能说出用法只能60分。更重要的是对vuex设计理念和实现原理的解读。
 
-![vuex](../assets/vuex.png)
 
-回答策略：3w1h
+### 回答策略：3w1h
 
 1. 首先给vuex下一个定义
 2. vuex解决了哪些问题，解读理念
@@ -20,13 +21,10 @@
 
 
 
-回答范例：
+### 回答范例：
 
 1. vuex是vue专用的状态管理库。它以全局方式集中管理应用的状态，并且可以保证状态变更的可预测性。
 2. vuex主要解决的问题是多组件之间状态共享的问题，利用各种组件通信方式，我们虽然能够做到状态共享，但是往往需要在多个组件之间保持状态的一致性，这种模式很容易出现问题，也会使程序逻辑变得复杂。vuex通过把组件的共享状态抽取出来，以全局单例模式管理，这样任何组件都能用一致的方式获取和修改状态，响应式的数据也能够保证简洁的单向数据流动，我们的代码将变得更结构化且易维护。
 3. vuex并非必须的，它帮我们管理共享状态，但却带来更多的概念和框架。如果我们不打算开发大型单页应用或者我们的应用并没有大量全局的状态需要维护，完全没有使用vuex的必要。一个简单的[store 模式](https://cn.vuejs.org/v2/guide/state-management.html#简单状态管理起步使用)就足够了。反之，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它。
 4. 我在使用vuex过程中有如下理解：首先是对核心概念的理解和运用，将全局状态放入state对象中，它本身一棵状态树，组件中使用store实例的state访问这些状态；然后有配套的mutation方法修改这些状态，并且只能用mutation修改状态，在组件中调用commit方法提交mutation；如果应用中有异步操作或者复杂逻辑组合，我们需要编写action，执行结束如果有状态修改仍然需要提交mutation，组件中调用这些action使用dispatch方法派发。最后是模块化，通过modules选项组织拆分出去的各个子模块，在访问状态时注意添加子模块的名称，如果子模块有设置namespace，那么在提交mutation和派发action时还需要额外的命名空间前缀。
 5. vuex在实现单项数据流时需要做到数据的响应式，通过源码的学习发现是借用了vue的数据响应化特性实现的，它会利用Vue将state作为data对其进行响应化处理，从而使得这些状态发生变化时，能够导致组件重新渲染。
-
-
-

public/07-route-guard/README.md

@@ -1,26 +1,26 @@
-### vue-router中如何保护路由？
+## vue-router中如何保护路由？
 
 此题是考查项目实践能力，项目中基本都有路由守卫的需求，保护指定路由考查的就是这个知识点。
 
 
 
-答题整体思路：
+### 答题思路：
 
 1. 阐述vue-router中路由保护策略
 2. 描述具体实现方式
 3. 简单说一下它们是怎么生效的
 
 
 
-回答范例：
+### 回答范例：
 
 1. vue-router中保护路由安全通常使用导航守卫来做，通过设置路由导航钩子函数的方式添加守卫函数，在里面判断用户的登录状态和权限，从而达到保护指定路由的目的。
 2. 具体实现有几个层级：全局前置守卫beforeEach、路由独享守卫beforeEnter或组件内守卫beforeRouteEnter。以全局守卫为例来说，可以使用`router.beforeEach((to,from,next)=>{})`方式设置守卫，每次路由导航时，都会执行该守卫，从而检查当前用户是否可以继续导航，通过给next函数传递多种参数达到不同的目的，比如如果禁止用户继续导航可以传递next(false)，正常放行可以不传递参数，传递path字符串可以重定向到一个新的地址等等。
 3. 这些钩子函数之所以能够生效，也和vue-router工作方式有关，像beforeEach只是注册一个hook，当路由发生变化，router准备导航之前会批量执行这些hooks，并且把目标路由to，当前路由from，以及后续处理函数next传递给我们设置的hook。
 
 
 
-可能的追问：
+### 可能的追问：
 
 1. 能不能说说全局守卫、路由独享守卫和组件内守卫区别？
 

public/08-vue-perf/README.md

@@ -1,7 +1,9 @@
-### 你了解哪些Vue性能优化方法？
+## 你了解哪些Vue性能优化方法？
 
-答题思路：根据题目描述，这里主要探讨Vue代码层面的优化
+### 答题思路：根据题目描述，这里主要探讨Vue代码层面的优化
 
+
+### 回答范例
 - 路由懒加载
 
   ```js

public/09-nextTick-v3/README.md

@@ -1,10 +1,10 @@
-### 你知道nextTick吗，它是干什么的，实现原理是什么？
+## 你知道nextTick吗，它是干什么的，实现原理是什么？
 
 这道题考查大家对vue异步更新队列的理解，有一定深度，如果能够很好回答此题，对面试效果有极大帮助。
 
 
 
-答题思路：
+### 答题思路：
 
 1. nextTick是啥？下一个定义
 2. 为什么需要它呢？用异步更新队列实现原理解释
@@ -29,19 +29,10 @@
 > })
 > ```
 
-
-
-
-
-回答范例：
+### 回答范例：
 
 1. nextTick是Vue提供的一个全局API，由于vue的异步更新策略导致我们对数据的修改不会立刻体现在dom变化上，此时如果想要立即获取更新后的dom状态，就需要使用这个方法
 2. Vue 在更新 DOM 时是**异步**执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。nextTick方法会在队列中加入一个回调函数，确保该函数在前面的dom操作完成后才调用。
 3. 所以当我们想在修改数据后立即看到dom执行结果就需要用到nextTick方法。
 4. 比如，我在干什么的时候就会使用nextTick，传一个回调函数进去，在里面执行dom操作即可。
 5. 我也有简单了解nextTick实现，它会在callbacks里面加入我们传入的函数，然后用timerFunc异步方式调用它们，首选的异步方式会是Promise。这让我明白了为什么可以在nextTick中看到dom操作结果。
-
-
-
-
-

public/10-reactivity/README.md

@@ -1,12 +1,8 @@
-### 说一说你对vue响应式理解？
+## 说一说你对vue响应式理解？
 
 烂大街的问题，但却不是每个人都能回答到位。因为如果你只是看看别人写的网文，通常没什么底气，也经不住面试官推敲，但像我们这样即看过源码还造过轮子的，回答这个问题就会比较有底气。
 
-
-
-
-
-答题思路：
+### 答题思路：
 
 1. 啥是响应式？
 2. 为什么vue需要响应式？
@@ -18,7 +14,7 @@
 
 
 
-回答范例：
+### 回答范例：
 
 1. 所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。
 2. mvvm框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。

public/11-component-extends/README.md

@@ -1,10 +1,10 @@
-### 你如果想要扩展某个Vue组件时会怎么做？
+## 你如果想要扩展某个Vue组件时会怎么做？
 
 此题属于实践题，着重考察大家对vue常用api使用熟练度，答题时不仅要列出这些解决方案，同时最好说出他们异同。
 
 
 
-答题思路：
+### 答题思路：
 
 按照逻辑扩展和内容扩展来列举，逻辑扩展有：mixins、extends、composition api；内容扩展有slots；
 
@@ -14,7 +14,7 @@
 
 
 
-回答范例：
+### 回答范例：
 
 1. 常见的组件扩展方法有：mixins，slots，extends等
 
@@ -92,6 +92,6 @@
 
 
 
-可能的追问
+### 可能的追问
 
 Vue.extend方法你用过吗？它能用来做组件扩展吗？

public/12-nextTick-v2/README.md

@@ -1,17 +1,17 @@
-### nextTick实现原理
+## nextTick实现原理
 此题属于原理题目，能够体现面试者对vue理解深度，答好了会加分很多。
 
 
 
-#### 答题思路：
+### 答题思路：
 
 1. 此题实际考查vue异步更新策略
 2. 说出vue是怎么通过异步、批量的方式更新以提高性能的
 3. 最后把源码中实现说一下
 
 
 
-#### 回答范例：
+### 回答范例：
 
 1. vue有个批量、异步更新策略，数据变化时，vue开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。
 
@@ -102,6 +102,6 @@
 
 
 
-#### 可能的追问
+### 可能的追问
 
 你平时什么时候会用到nextTick？

public/13-reactivity-v2vsv3/README.md

@@ -1,17 +1,17 @@
-### Vue2和Vue3中的响应式原理对比，分别的具体实现思路
+## Vue2和Vue3中的响应式原理对比，分别的具体实现思路
 此题非常好，既考察深度又考察广度，面试者要对两个版本的响应式原理都有深入理解才能答好。
 
 
 
-#### 答题思路：
+### 答题思路：
 
 1. 可以先说vue2响应式原理
 2. 然后说出它的问题
 3. 最后说出vue3是怎么解决的
 
 
 
-#### 回答范例：
+### 回答范例：
 
 1. vue2数据响应式实现根据对象类型做不同处理，如果是object，则通过`Object.defineProperty(obj,key,descriptor)`拦截对象属性访问
 
@@ -79,8 +79,3 @@
    ```
 
    可以同时支持object和array，动态属性增、删都可以拦截，新增数据结构均支持，对象嵌套属性运行时递归，用到才代理，也不需要维护特别多的依赖关系，性能取得很大进步。
-
-
-
-
-