前端面试总结——2020/05/18

时间：2020 / 05 / 18
面试城市：杭州
面试岗位：前端开发
经验要求：1年以上
薪资范围：9K-14K(14薪)
面试情况：视频面试

以下为公司的工作职责和职位要求：

面试题：

1、简历中看到在上一家公司开发过基于Vue的后台管理系统能讲下具体的技术栈和你负责的页面吗？

回答：技术栈涉及到 Html/Html5 、CSS/CSS3 、JavaScript含ES6 、Vue全家桶、Axios网络请求 、Echarts图表、webpack打包工具 、git版本控制工具、postman测试接口。主要辅助另一位前端完成页面搭建，主要负责的页面有四个有用户管理、商品管理、订单管理、数据统计。

2、可否详细讲解这4个页面具体实现

回答：基于token值得不一样 后台管理权限也不一样。
1、用户管理页面 用户分为后台管理工作人员用户和产品用户 分为查看详细信息 修改权限 分配权限 及修改用户信息等。
2、商品管理页面 对产品的商品数据进行增删改查。 3、订单管理页面，每当用户在产品上下单时，后台右下角弹窗提醒 工作人员可以对订单进行接单拒单和派送。
4、数据统计 对产品日活 总活 日峰值 月峰值等进行监控并使用Echarts图表进行渲染。

3、在开发中 有对网络请求进行封装吗？怎么实现的？后期怎么使用？

回答：有的。
我是这样实现的：在src目录下创建一个axios文件夹，在axios文件夹下面创建myaxios.js 引入axios，使用promise封装自己的get和post方法，并对请求超时时间和请求头以及防止网络延迟 都有做处理 。
我是这样使用的：在同级文件创建api文件夹 在此目录下面创建api对应的文件夹方便管理 再创建对应的js文件引入刚刚封装好的axios，进行api请求， 对所有的api进行统一封装 后期需要使用这个api的时候进行按需引入

4、说以下vue生命周期

回答：vue生命周期钩子函数官方给出8个，分别为以下几个
beforeCreate ： 只执行一次，开始进行数据和方法的初始化的操作，data 中数据和 methods 中方法不能用
created： 只执行一次，已经完成数据和方法的初始化，data 中数据和 methods 中方法可以使用
beforeMount： 只执行一次，开始渲染虚拟 DOM
mounted： 只执行一次，已经完成了虚拟 DOM 的渲染，可以操作 DOM
beforeUpdate： 执行多次 ，data 中的数据即将被更新，会执行多次
updated： 执行多次 ，data 中的数据已经更新完毕, 会执行多次
beforeDestroy： 只执行一次 ，vue 实例即将销毁, 此时 data 中数据和 methods 中方法依然处于可用状态
destroyed： 只执行一次 ，vue 实例已经销毁, 此时 data 中的数据和 methods 中的方法已经不可用

5、vue生命周期中列举下你常用的钩子函数，并说出在这个钩子函数中使用的对应的业务逻辑

回答：一般常在 created 生命周期中初始化数据 在beforeDestroy中销毁一些无法回收的事件绑定和定时器。

6、beforeUpdate和updated有用过吗

回答：很少用。

7、简述对Vuex的理解，有哪些属性

回答：Vuex 是针对 Vue 的一个状态管理工具. 他有有几个核心的部分
state： 存储状态数据
mutations： 更新数据的方法(同步)
actions： 调用 mutations 中的方法, 更新 state 数据(使mutations可以异步)
getters： 对 state 中的数据进行预处理 比如过滤
当组件关系比较复杂的时候, 可以使用 vuex 简化组件间的传值

8、Vue双向数据绑定原理

回答：在Vue中是通过数据劫持以及结合发布者订阅者来实现的,数据劫持是利用ES5的Object.defineProperty(obj, key, val)来劫持各个属性的的setter以及getter ,在数据变动时发布消息给订阅者,从而触发相应的回调来更新视图。(但是面试官坚持Object.defineProperty是ES6的api)

9、在Vue中 页面怎么跳转到对应详情页

回答：对要跳转的a标签url绑定对应的id 点击之后跳转 通过parmas或者query获取对应的id值向后台发送请求获取对应的数据。
后期补充另一种方法(面试没说)：对要跳转的商品点击后把该商品的数据全部保存在localstroge中 在详情页中获取对应localstroge数据。

10、如果后台直接给你返回了1000条数据，你会做什么处理

回答：
1、首先 跟后台沟通，是否能将这1000条数据加个分页 按分页返回，若沟通不佳 前台处理
2、使用骨架屏对白屏进行处理
3、使用Object.freeze进行禁用数据绑定，达到性能优化
(面试官补充：还有一条，自行处理 每次加载100条是不是也可以达到效果)
(自己后期补充：虚拟列表)

11、有做过私人链接吗？怎么处理权限的？token值放在哪里

回答：做过，在封装axios中对拥有私人链接的路由进行权限限制，token值放在header头部(这里回答的不是很好)

12、有封装过组件吗？有什么好处

回答：封装过，在模块化开发中，将一个项目按照功能划分，理论上一个功能一个模块，互不影响，在需要的时候载入，尽量遵循高内聚低耦合。而且对性能方面也有很大的优化

13、var let const的区别

回答：大致有以下几个区别，1、顶级对象 2、作用域 3、预解析 4、暂时性死区 ，const除了以上几点有独特的地方 用来声明一个常量且声明同时必须初始化且后期不可改变。

15、sessionstroge和localstroge的区别
回答：
sessionstroge：内存为5m，只在当前浏览器关闭之前有效。不会自动把数据发送给服务器，仅用于本地保存(后期补充 面试没说：在不同浏览器窗口不共享，即使是同一个页面)
localstroge：内存为20m，保存在内存中，数据永久保存。不会自动把数据发送给服务器，仅用于本地保存

16、在当前标签下保存sessionstroge 在本浏览器复制该标签又重新打开，那么在这个新标签页下sessionstroge还存在吗
回答：存在
面试官：错误，不存在。sessionstroge只在当前会话有效。

17、我现在有个数组 我只会改变数组里面的值 这个时候我应该用什么去声明

回答：let (面试官：错误，此处应该用const，我只改变了数组里面的值但是没有改变数组的引用地址 所以使用const并不会报错)

18、小程序中怎么定义全局变量

回答：(这个一时慌了神忘了 小程序不是强项 ) 在app.js中的一个什么data中定义 ，不好意思 忘记了
(面试官：globalData)
(后期补充：在app.js中的globalData中定义全局变量，在其他页面的js中通过getApp()获取全局变量)

19、小程序中在哪个文件夹写组件，写完组件怎么使用，在哪里定义

回答：(这个也忘了 ) 不好意思，有点忘记了。是在components中写组件 在对应的js中定义使用组件吗？貌似不是
(面试官：使用组件时 在相对应的json文件中定义)
(后期补充：在对应的json文件中定义组件 在对于的wxml中就可以使用了)

20、小程序中我有个异步请求，在onLoad中使用时发现这个异步需要延迟很久 在onLoad中获取不到怎么办

回答：
我：延时器可以吗
面试官：错了，我们可以定义一个开关，等待网络延迟完毕后打开
我：哦哦，这个是对网络延迟做出优化吗？我在封装wx.request中有将wx.hideLoading()封装进去防止网络延迟造成白屏。
面试官：好的可以

总结：

在介绍个人项目中有点描述不太清楚，因为是辅助开发，可能有些技术点没有答到关键地方。在回答vue的时候感觉良好，在回答小程序面试题时有点惨不忍睹，因为上家公司没有开发小程序，所以小程序的功底有点差了，项目上的小程序的我花了两天复习小程序又花了三天完成的电商项目，难免有点不太记得。最好面试官向我问了工资及到岗时间 我要的工资是8-9k 后面面试官加了我微信要我拿小程序体验码给他看小程序，并且再次向我确定到岗时间，个人感觉这家稳了。