一连面试了七八家企业（涉及各个行业、其中包括腾讯外包等），总结一下经常问及的一些高频面试点，希望能对个别求职的朋友有所帮助。我的应聘的是前端开发岗位，坐标上海。
# 一、Css 部分
Css 部分较为简单，比较考验前端基础，这块内容个人觉得没有什么捷径
写Css 代码对前端开发者来说就像是吃饭一样平常，只要多敲代码，Css 很快就能掌握，写的越多掌握的越深刻
面试时比较需要注意以下几个点
# 1.1 flex布局&grid 布局
flex 布局一定要掌握，因为面试问到的概率简直不要太大，只要面试涉及到Css 的问题，极大概率都可以使用flex 布局来回答，比如问到定位，响应式响应式，多平台适配等，很多都可以使用flex 的知识点回答。
我有一篇博文专门写flex 布局的，这里就不展开说了，千万记住，flex 非常重要！
grid 布局也挺好用的，但我不怎么熟，有兴趣的自行研究哈
补充：布局这块问原理比较容易问栅格布局的原理：媒体查询，代表就是bootstrap
# 1.2 前端如何实现移动端适配
这里比较粗浅的说一下我回答的几个方面，这里不涉及到深层原理
1. 调整视图视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
加了视口之后，很明显一个变化就是页面的宽度就会跟我的设备宽度一致，当然这是很片面的说法，具体深入这里不做探究
2. 单位方面要做出改变
做移动端适配时候尽量使用移动端响应式计量单位：rem, em
px 是相对固定单位，字号大小直接被定死，所以用户无法根据自己设置的浏览器字号而缩放，em和rem虽然都是相对单位，但em是相对于它的父元素的font-size，页面层级越深，em的换算就越复杂，而rem是直接相对于根元素，这就避开了很多层级关系。而且移动端新型浏览器对rem的兼容很好
3. 布局
可以使用传统的百分比布局（但是现在基本已经不用了）
还有采用当前流行的flex 响应式布局或者grid 布局也可以实现
4. 使用UI 框架开发
当前移动端生态下有很多优秀的框架可以使用，比如移动端mint-UI框架，element-UI框架等，很多时候没必要自己造轮子，这些框架经过了众多开发者的考验，远远比自己徒手造出的不成熟的轮子靠谱。当然，如果大公司里有另外需求另说
# 1.3 Css 动画
面试时候碰到了一些问animation 动画的概念，说实话这块我也用的少，所以含糊其词就过去了。但是Css 中，动画的的确确很重要，问到底层很容易就问到了动画的实现了
# 二、Vue 部分
如果简历上写了Vue 生态的话，Vue 这块绝对是面试的重点部分，以下总结节点面试碰到较多的几个问题:
# 2.1 Vue 的生命周期
Vue 的生命周期主要有8个，解释了Vue 组件从创建到销毁的各个阶段节点，分别是创建阶段：beforeCreate、created 挂载阶段：beforeMount、mounted 更新阶段：beforeUpdate、updated 和销毁阶段：beforeDestroy、destroyed，如果再深入点还可以额外增加两个：activated、deactivated，这两个钩子一般配合keep-alive 使用。
具体的我就不在这展开了，直接去官网学习
# 2.2 Vue 路由的钩子
Vue 的路由钩子分为全局钩子和组件内钩子，全局钩子有beforeEach、afterEach两种，组件内钩子有beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave 三种，钩子函数接收三个参数，分别是to、from、next，to参数表示将要去哪的路由，from 表示 从哪来的路由，next() 表示手动跳到下一步。
# 2.3 Vue 路由的跳转方式
主要有三种：
- route-link 标签：这个类似于html 中的a 标签，里面有个to 属性相当于a 标签的href 属性
- 哈希跳转：
this.$router.push({path: '/user'}) - 历史跳转：
this.$router.replace({path: '/user'})
# 2.4 Vue 双向数据绑定
双向数据绑定是Vue 的巨大亮点之一，面试涉及到Vue 基本都会问这个问题
双向数据绑定是指的数据模型（Module）和视图（View）之间的双向绑定，通过v-model 指令来给标签绑定数据，用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。
这块我也没很理解，源码也没深入分析，有兴趣的看看其他大神的文章吧
# 2.5 Vue 的组件传参
Vue 的组件传参也是基本面试必问的
这块我也一篇博文专门写Vue 中传参的，这里就不展开说了
主要需要回答到传统的父子间传值方式以及Vuex
# 2.6 Vue 自定义指令
除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。
使用Vue.diretive() 来全局注册指令。也可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项
# 2.7 Vue 常用修饰符
常用的有事件修饰符（如.stop 阻止事件冒泡、.prevent 提交事件不再重载页面 等等）、按键修饰符（系统对常用的键值提供了修饰词，对于没有的可以查询使用keyCode 指定）、系统修饰符（可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。如 .ctrl、.alt 等等）
具体可参考文章：vue常用的修饰符
# 三、Node 部分
# 3.1 如何解决跨域问题
这个在我另一篇面试的文章中总结过两种
另外再补充两种：
- 如果是开发阶段，可以使用配置proxy 正向代理的方式来实现跨域，这种方式在开发中用的还是比较多的，教程参考另一篇文章链接
- 在开发调试阶段可以使用比较取巧的方式，例如安装谷歌插件
CORS unblock（挺推荐的），或者更偏门一点，直接改浏览器的运行后缀，管理员运行（不是很推荐）
总之，解决跨域的方法非常多，注意区分开发阶段和部署阶段使用合适方法
# 3.2 如何实现身份拦截的
- 对Domain 进行分析，对非前端域名进行屏蔽
- 设置路由守卫，进行二次拦截
- 利用
jwt生成token 身份令牌，对敏感操作校验令牌真实性（推荐）
# 3.3 如何实现服务端渲染
在后端渲染前端这个需求也很常见，但是一般用在一些页面较小、较为简单的项目，这个方式的好处是前后端都运行在同一个服务中，完全没有跨域问题，而且部署也较为简单直接，但是大项目还是推荐使用框架，前后端分离的方式开发
后端渲染一般要借助第三方插件：如art-template，这里还要稍微了解一点模板语法的知识，不过特别简单
# 四、算法部分
# 4.1 斐波那契数列求和
1 1 2 3 5 8 13 ... 这种，前两个数之和等于第三个数，这种数列叫做斐波那契数列
伪代码如下：
function fn(n) {
if(n < 0) return
return n < 2?n:fn(n-1) + f(n-2)
}
2
3
4
# 4.2 数组去重
从不同的角度去看待该问题就会有多种实现方法，这边有篇文章专门总结了很多数组去重的方法
主要能掌握最基础的双重for 循环去重、利用对象的key 不重复的特性、利用new Set() 结构去重这三种就可以