面试题背诵，回答的思路和模板，思路清晰

一、总体上

1、回答每个题目时，*最好能够联系项目的场景*（前提是：你是知道的），这样会让对方很满意，这也是为什么，同样是回答上了，但是面试结果好坏不同。

2、回答时，一定要带上序号，如：第一、第二； 首先、其次；

3、对80%的面试题需要达到理解：

1）、把面试题的答案，以前的课堂视频，课堂案例统一进行整理，特别是自己的薄弱点。 ​ 2）、可以在背诵面试题的同时，敲一下代码。加深印象和理解。眼过千遍不如手敲一遍

4、背诵时，最好沿着：输入===》理解===》输出的思路。不要只停留在输入（背诵）的步骤中。

如：

输入：背诵完一道题目，把答案输入到大脑中。

理解消化：把答案盖住，大脑思考回忆，如果这个步骤中，效果不好，就需要观察答案中的描述逻辑，每一步在描述哪些问题，有没有联系，找出关键词等等。

输出：写出来。写的时候，把序号带上，缩进，对齐都做好，格式整齐了，就能带动背诵时的思路清晰。

二、题目进行分类

答案和模板参考：VUE面试题系列01（带数字，带序号），前端面试题-CSDN博客

1、两个知识点的区别：

先说相同点，再说不同点（不同点要分维度，分出维度才好理解）。

如：

v-show 与 v-if 有什么区别？

一、相同点：

v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。

二、不同点：

1、原理不同：

v-if是通过dom元素的删除和添加，来完成显示和隐藏，

    v-show是通过修改样式属性display的值，来完成显示和隐藏。

2、性能消耗的不同

      v-if的性能损耗体现在切换时，

      v-show的性能损耗在首次（特别是首次处于的显示的情况下）

3、使用场景的不同

        v-if使用在元素切换不频繁的场景。

        v-show使用在元素切换频繁的场景。

4、安全性的不同

      v-if的安全性好
​
      v-show的安全性不好。

再如：

请问 cookie，localStorage，sessionStorage 的区别

相同点：

cookie，localStorage，sessionStorage都是在客户端保存数据的，存储数据的类型：都是字符串。

不同点：

1、生命周期：

1）、cookie如果不设置有效期，那么就是临时存储（存储在内存中），是会话级别的，会话结束后，cookie也就失效了，如果设置了有效期，那么cookie存储在硬盘里，有效期到了，就自动消失了。

2）、localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

3）、sessionStorage仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

可以简单的理解为：sessionStorage，没有设置有效期的cookie。
​
    如果说把cookie的有效期设置为永远永远，永久，那么就是localStorage。
    cookie没有设置有效期，那么就是sessionStorage

2、网络流量：

cookie的数据每次都会发给服务器端，而localstorage和sessionStorage不会与服务器端通信，纯粹为了保存数据，所以，webstorage更加节约网络流量。

3、大小限制：

cookie大小限制在4KB，非常小；localstorage和sessionStorage在5M

4、安全性：

WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

5、使用方便性上【这一点可以不说】

WebStorage提供了一些方法，数据操作比cookie方便；

setItem (key, value) —— 保存数据，以键值对的方式储存信息。 getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。 removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 clear () —— 删除所有的数据 key (index) —— 获取某个索引的key

2．碰到优缺点的描述：

直接按照序号的方式描述，如果担心自己会忘掉一些点，一开始不要说总数，直接说序号。

如：

说说你对 SPA 单页面的理解，它的优缺点分别是什么？

首先：

SPA的英文是single-page application ，也就是说整个项目中只有一个页面。

单页面应用的实现思路： 就是在 Web 页面初始化时加载所有的 HTML、JavaScript 和 CSS，页面的内容的变化，靠动态操作DOM。

其次，

说说它的优点和缺点：

它的优点有三点：

第一点：局部刷新。用户体验好、快，内容的改变不需要重新加载整个页面。

第二点：服务器的压力小。基于上面一点，SPA 对服务器的压力小；

第三点：前后端职责分离。架构清晰，前端进行交互逻辑，后端负责数据处理；

它的缺点也有三点：

第一点：初次加载耗时多。为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

第二点：**前进后退路由管理问题。**由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理（这是vue-router做的）；

第三点：SEO 难度较大。由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。 ———————————————— 版权声明：本文为CSDN博主「田江」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：VUE面试题系列01（带数字，带序号），前端面试题-CSDN博客

3．谈谈你对某某问题的理解和了解？（这种题目描述比较模也是比较常见的）

基本上按照如下思路，有哪个说哪个：

（1）是什么（what）：技术的作用和意思（简练），

（2）有什么（have）

（3）怎么用，（how）

(4) 什么地方用（where）项目场景

（5）如果能够进一步说原理最好。（为什么 why）

如：

谈谈你对 Vue 生命周期的理解？

1）、生命周期是什么？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

2）、生命周期有四个阶段和八个钩子函数

vue的生命周期核心经历了四个阶段，在四个阶段的前后分别有两个钩子函数。

第一阶段：数据挂载阶段：把配置项data中的属性，赋给了vue对象本身，并做了数据劫持。

    该阶段前后的两个钩子函数：beforeCreate和created

第二阶段：模板渲染阶段：把vue对象的数据渲染到模板上。

    该阶段前后的两个钩子函数：beforeMount和mounted

第三阶段：组件更新阶段：当数据发送变化时，组件会进行重新渲染，所以，准确的说是，组件重新渲染阶段。

    该阶段前后的两个钩子函数：beforeUpdate和updated

第四阶段：组件销毁阶段：组件销毁。

该阶段前后的两个钩子函数：beforeDestroy和destroyed

可以补充：

当使用keep-alive包裹组件时，会有组件激活和停用之说，这两个钩子函数分别是：activited和deactivated 1 还可以补充：

项目场景， 1）、（当页面初始的数据来自后端）发送请求在哪个钩子函数，created。为什么，请看第八个题。 2）、在destroyed钩子函数里销毁不使用的全局性（挂载window对象下）的对象：定时器、清除事件总线绑定的事件。

再如：

谈谈你对vueX的理解
 

1、vueX是干什么的

1）、vuex能够保存全局数据，供整个应用使用，可以在组件之间传递数据。

2）、vuex保存的数据是响应式的

3）、vuex保存的数据可以跟踪状态的变化

2、vueX的核心概念（有什么）

state : 数据仓库 ，存储所有的 共享数据 ，相当于vue组件里的data

getter ： 在state的基础上 派生的数据， 相当于vue组件里 computed

mutation：修改state的数据时，用mutation，这与跟踪状态 有关系

action：解决mutation里只能有同步代码的问题，action里可以有异步代码

modules：模块化的解决方案

3、vueX的数据流

组件里 dispatch（派发）vueX中的 action，action里commit（提交）mutation，mutation里修改state。state被修改后，会响应式到组件上。

4、辅助函数

现在的面试，都会问的比较多。而且在项目中大部分都会使用辅助函数来简化项目中的代码。

有了这些辅助函数后，在组件里，不用再写$store了。

mapState：把vuex中state（状态）映射（合并）到组件对象的computed上。直接使用计算属性就可以拿到vuex的状态

mapGetters：把vueX的getters映射到组件的computed上。

mapMutations：把vueX的mutations映射到组件的methods上。

mapActions： 把vueX的actions映射到组件的methods上。

5、modules

当项目比较大时，所有的全局数据存放在state里，会非常混乱，怎么办？使用module，把数据分门别类的进行处理，即：模块化。 每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

再如：

路由守卫

1、什么是路由守卫

控制组件的跳转，对是否能够进入某个路径对应组件做限制。根据业务逻辑来判定是否可以进入某个组件。

什么时候使用路由守卫：当进入某个路径时，会有限制。就需要使用路由守卫。

2、路由守卫有哪些分类及其对应的钩子函数

1）、全局守卫

     1）、前置钩子：beforeEach，当地址栏的路径发生变化时，会先调用该钩子函数。

     2）、后置钩子：afterEach，当路由匹配成功后，先调用该函数，然后才创建组件。

2）、路由独享守卫

     1）、只有前置：beforeEnter：当匹配到某个指定的路由后，会先调用该函数，然后再创建组件。

3）、组件内部守卫

        1）、前置：beforeRouteEnter：当路由匹配成功后，进入组件前，先调用该函数。

        2）、路径更新，组件复用：beforeRouteUpdate： 当地址栏路径发生变化，但是进入的组件和上一个组件是同样的情况下，会调用先该函数。如：

        3）、离开：beforeRouteLeave：当通过路由的方式离开某个组件前，会调用该函数。

3、路由钩子函数的参数：

to：想去哪个路由，to和$route是同样的对象

from：来自哪个路由对象，from和$route是同样的对象

next：下一步何去何从。

next(true)：默认就是true，表示继续前行

next(false)：不能前行

next(路径字符串或者对象)：跳转到指定的路径。

4．碰到：“为什么要使用*”时，

可以先说，不使用它会出现的问题。

如：

vue组件中 data 为什么是一个函数？

因为data是引用类型，如果不用函数，复用的组件的data会指向同一块内存区域，导致数据之间互相影响。

而使用函数时，每次实例化组件时，会调用data函数，return一个新(new)的对象。这样每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响。

5、在碰到大段详细的描述时：

（1）流程清晰：对文字进行整理。

（2）如果流程不是很清晰，建议，结合项目场景进行描述。

6．问原理性的题目：

需要解释原理的思路和牵扯到的每个原生知识点的目的，作用。带上序号最好

如：

vue2响应式原理

深入响应式原理 — Vue.js

vue2响应式的原理是借助数据劫持和发布订阅者模式来完成的。

1、数据劫持：

目的：能够感知到数据的改变。

数据劫持是：使用ES5的Object.defineProperty()。把data配置项中的所有数据进行遍历，转成setter和getter（或者说，给每个属性增加set和get函数）既就是：访问器属性。

2、发布订阅者模式：

目的：当数据改变时，（直接和间接）使用该数据的模板处都会有相应的改变（模板会重新渲染）。

可能对方会进一步追问：能不能说的详细点。

怎么回答？

1）、在vue构造函数里，循环变量data中所有属性。首先，保存属性的值，再利用Object.defineProperty()给每个属性增加setter和getter方法。然后，每个属性再new 一个自己的Watcher对象（订阅对象）进行监听，让所有使用该属性的dom元素都订阅该属性。同时，在set函数里会发布。（发布就相当于调用render函数，重新渲染页面）。

2）、当修改某个属性的值时，该属性的set函数就被调用，同时会调用所有订阅该属性的订阅者（函数）。