前端面试分享：安安

1，你是怎么对axios进行二次封装的，有什么用？

a.添加请求拦截器

在请求发送前进行必要的操作处理，例如添加takan，cookie请求添加验证，设置请求头等，相当于是对每个接口里相同操作的一个封装；

b.添加响应拦截器

同理，响应拦截器也是如此功能，只是在请求得到响应之后，对响应体的一些处理，通常是数据统一处理等，也常来判断登录失效等。

---

2，什么是数组扁平化？

所谓的数组扁平化就是将多维数组转化为一维数组；

一般数组扁平化，数组中存储的多维数据都是数组不会是对象或者函数；

具体实现：最常用的方法就是使用toString（）方法将数组中的每一个数据，转成一个字符串，使用逗号进行间隔，再使用字符串中的split方法，以逗号进行分割将字符串再转化为一维数组；

---

3．路由传参query与params区别

query类似 get，跳转之后在地址栏中显示拼接参数，类似？id＝1；params类似 post，跳 转之后不在url中显示参数；相对于query比较安全；

注意点：（params在进行路由传参时，要在路由中配置占位。如果不在路由中配置占位，跳转过去以后刷新页面会数据丢失，query参数数据不会丢失）；

---

4．在项目中有没有单独封装组件

有的，在项目的commen 文件下会存放项目公用组件（如：页面的头组件、页面底部组件等）项目里的 feature文件下则是放项目的功能组件（如：轮播图、分页器、上拉加载这些功能组件）把这些页面重复的部分，抽离出来进行单独的封装，有效的减少了代码量，提升了项目的开发效率。解决了传统项目中效率低、难维护、复用性低的等问题。

---

5．在项目中发送请求怎么携带token

答：当用户登陆的时候，后端会把用户的信息和token返回给我们的，我们进行存储token，把存储的token，放在请求拦截器中，这样所有的请求都可以直接通过请求拦截器将token传给服务器。

---

6．说一下项目的流程答：

aa．项目立项

bb．BA整理项目需求，定项目周期；3．需求评审（过项目需求）

cc．后端设计数据库，ui设计原型图5．ui评审

dd．前端静态页面开发（mock数据测试），后端做接口，测试做测试用例；

ee．前后端联调

ff．测试

gg．项目上线

---

7．get和post方式提交数据的区别是什么答：

1．GET提交的数据会放在？之后，以问号？分割URL和传输数据，参数之间以＆相连；

（get因为浏览器对URL的长度有限制）

2．传输数据的大小不同，get方式传输的数据量较小，而post可以传输大量的数据。

3．安全性不同，get方式传输数据能够被别人轻易的看到数据内容，所以安全程度较低，而post则可以很好的隐藏。

4．在服务器上的作用不同，get是从服务器上获取数据，而post是向服务器上传送数据。

---

8．在实际开发中的应用

·在进行数据查询／获取的时候，用get的方式进行提交数据；

·当重要数据传输或者对数据进行增加、删除和修改的时候，用post的方式进行提交数据；

---

9.router和route之间的区别？

$router用来操作路由，$route用来获取路由信 息

$router是VueRouter的一个实例对象，他包含了所有的路由，包括路由的跳转方法，钩子函数，子对象（例如history）

$route是一个跳转的路由对象（路由信息对象），每一个路由都会有一个$route对象，是一个局部的对象。

---

10.url的解析过程？

用户输入 URL 地址。

对 URL 地址进行 DNS 域名解获得IP地址。

建立 TCP 连接（三次握手）。

浏览器向 web 服务器发送一个 HTTP 请求报文。

服务器返回 HTTP 响应报文给客户端。

关闭 TCP 连接（四次挥手）。

**DNS 解析就是从域名映射到IP地址的过程

---

11，hash和history的区别和优缺点？

---

12．对 ＄nextTick异步渲染对理解

Vue采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作DOM。有时候，DOM1的数据发生了变化，而DOM2需要从DOM1中获取数据，那这时就会发现DOM2的视图并没有更新，这时就需要用到了 nextTick了；

作用：在下一次DOM更新结束后执行其指定的回调；（当数据更新后，要基于更新后的新

DOM进行某些操作时，要在nextTick指定的回调函数中执行）。如果不采用异步更新，在每次数据的更新后，都会对当前组件进行重新渲染。所以为了性能考虑，vue 会在本轮数据更新后，再去异步更新视图；

---

13．如何快速让一个盒子水平垂直居中

纯flex布局实现：给元素设置flex布局，添加flex的alignltems：center垂直居中justifycontent：center水平居中，实现居中效果；

flex 布局＋外边距（margin）实现：给父级设置为 display： flex； 给子级添加 margin：auto； 就可以实现水平垂直居中显示；

绝对定位＋外边距（margin）实现：绝对定位的元素将上下左右都设置为0，再设置margin：auto即可实现居中；

绝对定位＋外边距（margin）＋C3的转换transform 中的 translate 实现：：绝对定位元 素，利用 margin 偏移外容器的50％，再利用translaate回补自身宽高的50％；

---

14．常见的HTTP请求有哪些？他们的区别是？答：

常见的有5种，分别是Get、Head，Post、 Put、Delete

1．Get：请求指定的页面信息，并返回实体主体，／用于获取／查询资源信息；

2．Head：类似于GET请求，只不过返回的响应中没有具体的内容，用于获取报头。

3．Post：Post请求会向指定资源提交数据，请求服务器进行处理，如：表单数据提交、文件上传等，请求数据会被包含在请求体中。

4．Put：从客户端向服务器传送的数据取代指定文档的内容。

5．Delete：用于请求服务器删除所请求URL;

最常见的HTTP请求方法是Get和Post；

---

15．你上家公司项目是前后端分离的吗答：

对，做的是前后端分离的项目，但开始不是，开始前后端代码混在一起写的，后来重构成前后端分离的项目，方便前端和后端自己维护的代码；

注：所谓前后端分离就是前后端职责明晰：后端只提供数据接口地址返回json数据，前端用ajax请求json数据，页面的所有业务逻辑都是前端来写，让前端控制力更强，并且减轻后端逻辑处理压力。

---

16.项目中你是如何对移动端做适配的？

前端做适配没有最好的方法，只有适合的方法，目前前端主要做适配的方法有：百分比,em,rem，媒体查询（即mediaquery）flex布局即弹性盒），vw.vh等目前我在项目中用的多的是rem，flex布局，有时会用到媒体查询，在做pc响应式布局时用主要是用了一个手淘的js库flexible.js在页面变化时，检测页面宽度，除以10份，动态的赋值给font-size.属性.而页面的布局我是通过rem来进行布局的，从而达到移动端适配；

---

17.Element-ul的form表单验证你是怎么使用的

首先是在form表单配置rules校验规则，可以在组件data中自定义（或者统一封装到一个JS文件中），使用required:true，来设置form表单为必填项，message设置提示信息，通过trigger定义触发校验方式；当全部表单都符合校验规则，在点击确定的时候调用validate进行最终的表单校验。validate参数为一个回调函 数，回调函数有一个config参数（是否校验成 功）我们可以对config进行判断，成功就携带form表单的信息提交后台

---

18.项目中的商品详情页你是怎么实现的

当用户点击商品名字或者图片的时候，就进行this.$router.push进行路由跳转并传递商品的d到详情页，再通过后台提供的相关详情接口，把id作为参数，在详情组件的mounted钩子函数中派发action调用Vuex中的请求函数，获取到商品的详细数据存储Vuex中，通过getters配置对象，对数据进行简化，通过map getters映射给组件，使用插值语法或者v-for进行数据炫染；

---

19.Vue 的父组件和子组件生命周期钩子函数执行顺序

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

---

20.为什么说刷新页面vuex的数据会丢失

页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。

解决的思路：

办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据

办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage （ 以防请求数据量过大页面加载时拿不到返回的数据）

分析：

办法一的缺点是不安全，不适用大数据量的存储；

办法二适用于少量的数据，并且不会出现网络延迟；

办法三是要讲的重点，办法二和办法一一起使用

---

21.什么是虚拟dom和diff算法

简单的说：虚拟DOM就是用来模拟DOM结构的一个js对象

虚拟DOM的工作流程：

首先：用JS以对象的形式模拟DOM结构，表示页面上的某个节点

其次：通过patch函数，将虚拟DOM节点塞入到空的容器中

最后：通过核心计算渲染时指挥修改改变过的节点，没有变化的节点不需要再次渲染

使用虚拟DOM的好处在于，新虚拟DOM和旧虚拟DOM的比较，计算出来需要更新的视图，再 操作DOM，也就是使用虚拟DOM来表示真实的DOM，目的计算出最小的变化，根据最小变化来更 新真实的DOM结构。

虚拟DOM核心diff算法：

diff算法的概念：diff 算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍 历

流程：

1-先遍历一次老的虚拟DOM

2-再遍历一次新的虚拟DOM

3-根据改变/新增，对真实DOM重新进行排序

弊端：如果有100个DOM节点的话就要计算100^3次，如果节点更多的话会造成大量的计算，这样 的方式是不可取的

所以，vue中对diff算法进行了优化

1-只会比较同一层级，不会跨级比较

2-比较标签名：标签名不同时，直接删除，不继续深入比较

3-标签名相同时：判断key是否相同，这就是为什么在vue中v-for循环 一定要绑定key的原 因，当key相同时，就会默认是相同节点，不进行深入比较

优点：通过优化后，100个DOM节点只会计算100次，极大的节约了时间。

---

22.em，rem区别：

在css中，用的最多的就是px，em，rem三个长度单位，这三个单位的区别就是：

px是固定的单位长度，一旦设置了就无法随页面的大小而适应改变。

em是相对长度单位，比px更具灵活性，em的长度是相对于父元素

rem的长度是相对于根元素，也就是html的字体大小