2020年10月10日---第一天面试总结

我昨天下午一共面试了四家，（电话和视频面），昨晚把面试题都记录下来了，今天一个一个的研究了一下答案。做个总结，高频的还是那些平常用到的东西。其实我也不知道面试官到底想要什么答案，只是听到他说嗯的时候，我就会觉得我的答案应该不会差太远。面试的单位我就不公布了。理解错误的地方欢迎指正。

第一家

1、keep-alive是什么？
keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，组件进行切换的时候，默认会进行销毁，如果有需求，某个组件切换后不进行销毁，而是保存之前的状态，那么就可以利用keep-alive来实现。

2、怎么用keep-alive实现ABC三个页面？
首先先用keep-alive包裹不被销毁的插槽。然后使用activated()和deactivated()方法。给路由设置keepAlive为true保持该路由的存活状态

3、vue.set怎么用？
vue不允许在已经创建的实例上动态添加新的根级响应式属性，$set可以触发更新，当对象新增不存在的属性时，会触发对象依赖的watcher去更新，当更改数组索引时，我们调用数组的splice方法去更新数组。
操作数组示列：

this.$set(arr,  index,  val)

操作对象示例：

this.$set( obj, key, val)

4、promise是什么？
Promise 是异步编程的一种解决方案：从语法上来讲，promise就是一个对象，它可以获取异步操作的消息；从释义上来解释的话，它就是承诺的意思，承诺过一段时间会给你一个结果。
状态：
① pending，等待状态，如正在进行网络请求，或者定时器没有到时间。
② fulfill，满足状态，当我们主动回调resolved时，就处于满足状态，并且会回调.then（）方法。
③ reject，拒绝状态，当我们主动回调reject时，就处于拒绝状态，并且会回调.catch（）方法。
可解决的问题：
① 可支持多个并发请求，获取返回数据。
② 解决回调地狱问题

5、什么是导航守卫？
导航守卫就是路由跳转过程中的一些钩子函数，路由跳转有很多过程，这些过程分为跳转前、跳转中、跳转后等过程，在每一个过程中都有一个函数，这个函数能让你继续一些其他的操作，这就是导航守卫。

第二家

1、介绍一下之前项目使用的技术栈。
这个是根据我的实际项目经验回答的，使用过angular4、angular.js、jQuery、vue、bootstrap等等。

2、如何做屏幕适配
（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式

3、rem是什么？
这道题是我回答了用rem做屏幕适配之后，紧接着的问题。
rem是css3新增的单位。rem和em的区别在于使用rem为元素设置字体大小时是相对大小，但相对的只是HTML根元素。通过它可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

4、如何用promise实现一个异步请求？

new Promise(function(resolve,reject){
  异步操作 ajax 定时器等{
    if(满意)
      resolve(value)
    else
      reject(error)
  }
})

5、事件委托

事件冒泡：
当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。
事件委托
就是将子元素的事件通过冒泡的形式交由父元素来执行。

6、事件循环
同步和异步请求分别进入不同的执行环境，同步的进入主线程，异步的进入任务队列。主线程内的任务执行完毕后，会去任务队列读取对应的任务，推入主线程执行。这种不断重复的过程就是我们说的 Event Loop (事件循环)。

第三家

1、vue的双向数据绑定原理？
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。
①实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
②实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
③实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器。

2、vue-router的路由守卫？
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter
3、beforeEach的原理？
router.beforeEach（）用来做一些进入页面的限制。比如登录，若没有登录就不能进入页面，只有登录了之后才有权限查看某些页面。也就是路由拦截。
原理：
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步执行，此时导航在所有守卫 resolve 完之前都一直处 等待状态中。
每个守卫方法接收三个参数：
to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行依赖 next 方法的调用参数。

next(): 进行队列中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。

next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

4、http和https的区别
区别：传输信息安全性不同、连接方式不同、端口不同、证书申请方式不同
一、传输信息安全性不同
① http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
② https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
二、连接方式不同
① http协议：http的连接很简单，是无状态的。
② https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。
三、端口不同
① http协议：使用的端口是80。
② https协议：使用的端口是443．
四、证书申请方式不同
① http协议：免费申请。
② https协议：需要到ca申请证书，一般免费证书很少，需要交费。

5、状态码
常见的：（其他的还很多，这几个是我回答的）
200 （成功） 服务器已成功处理了请求。
300 （多种选择） 针对请求，服务器可执行多种操作。
400 （错误请求） 服务器不理解请求的语法。
404 （未找到） 服务器找不到请求的网页。
500 （服务器内部错误） 服务器遇到错误，无法完成请求。

6、get和post请求的区别
（参考w3schools）
GET在浏览器回退时是无害的，而POST会再次提交请求。
GET产生的URL地址可以被Bookmark，而POST不可以。
GET请求会被浏览器主动cache，而POST不会，除非手动设置。
GET请求只能进行url编码，而POST支持多种编码方式。
GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
GET请求在URL中传送的参数是有长度限制的，而POST么有。
对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
GET参数通过URL传递，POST放在Request body中。

7、项目中，怎么实现权限管理的
结合我自己的项目经验回答的，运用组织结构的设计模式。将一个部门、一个分组、一个用户看成是一个组织，组织之间有明确的层级关系·······

8、灰度测试
就是将自己的产品先拿出来给一部分目标人群使用，通过她们的使用结果和反馈来修改产品的一些不足，完善产品的功能，使用户的体验度得到提高。

9、如何设计一个灰度测试
这道题我没回答出来，然后又聊了一下其他产品的测试方式。由于下午还有面试，等闲下来再尝试解决一下这个问题。

10、平时学习的途径是什么？
官网文档、csdn、掘金、书、视频。

11、react-native是如何实现跨平台的？
react Native是通过虚拟DOM实现跨平台，运行时将虚拟DOM转换为相应的web编码、android编号、ios编码进行运行的。

第四家

1、vuex的Mutations和Action的区别？
① Action 提交的是 Mutation，而不是直接变更状态。
② Action 可以包含任意异步操作
2、vue.set的方法，为什么不能直接添加？
上面已经问过这个问题了。
3、原型链
原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
原型对象也是普通的对象，是对象一个自带隐式的 proto 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。

4、用es6语法实现数组去重。

// es6提供的新的数据结构Set，类似数组，但是成员的值都是唯一的，没有重复的值。
function dedupe(arr) {
    var newSet = new Set(arr);  // arr变成了set的数据结构，并去除了其中重复的元素
    return Array.from(newSet);  // Array.from方法将set数据结构转为数组数据结构
}