一、自我介绍
一定要提前准备好逐字稿，重点是要把自己的经历和应聘的职业相关联。项目介绍注重你有哪些能力，主要熟练的技术栈，项目的类型和负责的部分模块等；职业经历简单说一下转换的理由，不能过分反应出自己的不稳定性。
二、问题环节
1. 之前做过哪些项目，主要运用哪些技术栈？
这里按照自我介绍的文稿介绍即可，言简意赅即可。
2. 你们为什么选择了这个技术栈开发项目，它给你们解决了什么问题？
- vue
第一、vue好上手，官方文档也有中文，api好理解好用，组件化模块化结构很清晰，而且有element-ui框架，很容易上手。
第二、前端人员会vue的多，作为企业的角度招聘的话成本低。
第三、结合你的项目，谈一谈浏览器兼容问题，项目类型等等。
- react
3. 谈谈vue的生命周期？
系统自带的有8个：
beforeCreate
created(有data,但没有节点)
beforeMount
mounted(有data,有节点，请求)
beforeUpdate
updated
beforeDestroy
destroyed如果用keep-alive的话会加两个——vue的内置组件缓存组件
activated（活跃）
unactivated（不活跃）如果这里面试官继续问的话，可以说一下keep-alive的使用场景：
当要实现点击多个li请求不同的数据内容时，为了减少重复请求次数，可以运用到actived的生命周期，把请求函数写在actived里面，这样已经点击请求过的数据不会重复请求。而放在created或者mounted里面每次点击切换的时候都会重新请求。
4. v-if 和v-show 的区别？
首先这俩都是控制元素或组件显示和隐藏的；
v-if是通过创建和删除，可以用在template和keep-alive；
v-show是通过css样式，则不可以；
如果要频繁使用显示隐藏功能的话用v-show，如果需要初次渲染的话就用v-if；
比如说有个页面是列表展示和图片展示的话，就需要用V-show；
5. vue组件是如何通信的？
可以先解释一下使用场景：
通信的话是这样的，现在有一个页面由一个父组件和多个子组件组成，如果每个组件都请求数据的话，会造成速度降低等问题，所以就会有通信，父组件请求一次，子组件接收父组件传来的值即可；
- 父子：父组件在子组件实例上用v-bind绑定传递的属性名，子组件props拦截获取；
- 子父：事件绑定，子组件在方法中用this.$emit传递，父组件接收参数获取；
- 兄弟：this.$emit 和 this.$on 传递；
6. vue中的数据双向绑定原理？
- vue2：
在data的变量，vue会遍历，利用Object.definePorperty给每个变量添加getter和setter方法，如果读取数据触发getter事件，如果修改数据触发setter事件。这样就可以监听数据的变化了；
- vue3：
vue3的话是用了es6的proxy代理，一般基本数据类型的话是ref，用的原理也是订阅者发布者模式，引用数据类型的话是proxy代理；
如果问到vue2和vue3的区别（不止这些，可以结合自己涉及过的讲）：
- 响应式原理不同（同上）
- 删除：vue2中不能实现响应式，得用$delete实现，vue3的话可以，因为它除了有getter和setter还添加了一个deleteProperty方法，实现删除响应式；
- 兼容：vue3有的浏览器不兼容；
- api不同，vue3是组合式API，vue2是分开的API。(provide inject)；
- 内置组件：vue3中添加了teleport suspense组件；
7. 如何实现一个基本的数据双向绑定？
var obj = {}
var texts = 'hello'
let ipt = document.querySelector('#input')
let txt = document.querySelector('#text')
Object.defineProperty(obj,'hello',{
get(){
return texts
},
set(newV){
return newV
}
})
ipt.addEventListener('input',function(e){
obj.texts = e.target.value
txt.innerHTML = obj.texts
})8. MVVM和MVC有什么区别?
MVC（Model View Controller）：强制将业务数据(Model)与用户界面(View)隔离，用控制器(Controller)管理逻 辑和用户输入。
MVVM（Model,view, viewModel）：改进是数据绑定方面。本质上就是 MVC 的改进版，整体和 mvc 差不多；
最大的区别是 mvc 是单向的，而 mvvm 是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据；同时解决了mvc中大量的DOM操作使页面渲染性能降低，慢慢影响用户体验，当model频繁发生变化，开发者需要主动更新到view。
9. 有没有用过其他的框架？
如实回答即可。
10. 前端代码的自动化测试有没有了解？
不清楚：这个我也不绕弯子，不是很清楚，了解的不多；
了解：如果你工作中又涉及到，如实说即可；
11. js中的数据类型?
基本数据类型：string,number,undefined,boolean,symbol,
引用数据类型：object(array,function，reg)
12. js中的==和===有区别?
- ==：比较值
valueOf 会进行隐式转换
string + any = string
boolean + number = number
- ===：比较值+数据类型
13. js深浅拷贝？（重点）
首先说什么情况下会遇到深浅拷贝：
先定义一个对象时，里面有一些属性和方法。当把这个对象用=赋值给一个新的空对象后，修改新对象里面的属性值，原来定义的对象里的属性值也会发生变化。
这是因为js的数据类型分为基本数据类型和引用数据类型，基本类型存储在栈里面，引用数据类型存储在堆里面，但是指向堆里面的指针是存放在栈里面的。当我们用=去赋值给一个新对象时，就相当于把指针赋值给了新对象，所以改了新对象的值原来对象的值也会发生变化。
所以：
浅拷贝：只复制指针；
object.assign(obj), clone(), Arrays.copyOf()
深拷贝：在堆里面重新开辟空间，创建新对象，引用地址不一样；
JSON.parse(JSON.stringify(obj))
具体用哪个看业务需求，因时而异，没有一成不变的规则；
14. 原型和原型链的理解？（重点）
首先什么是原型prototype？
首先js里面一切皆对象嘛，创建对象的方式主要有三种，字面量，new关键字，构造函数。前两个的话可以创建单个对象，但不能创建多个。构造函数是把对象中公共的属性和方法抽离出来，通过new实例来构建对象；那如果我构造函数里面有一个方法，创建多个对象的时候会重复申请空间，但里面存放的都是同一个方法，这样的话会造成内存浪费。所以就有个prototype原型，把一些公共的方法放在原型上，new出来的不同的对象都去原型上找这个方法，这样能节省内存空间。这就是原型的用途；
其次原型链是什么？
如果我查找对象中的某个属性，该对象找不到，会通过–propto–属性去构造函数里面去找，构造函数找不到，去对象原型上找，原型找不到，就去原型的原型上找，一直找到object的null；这个过程就叫原型链。
如果继续追问原型，构造函数的关系：
三者的关系：构造函数有个属性prototype，实例对象有个属性–propto–，二者是相等的。
15. 什么是闭包，闭包解决了什么问题？
闭包是一个函数内部返回另一个函数
优点：外部可以访问内部的变量，内部可以封装一些专属的方法变量，保持独立性；
缺点：闭包里面的变量没办法进行回收，因为js的回收机制不确定会不会用到。内存泄露的问题可以在函数内部运行完这个变量后把这个变量=null 解决，有的浏览器会有内存泄漏的问题，有的没有；
16. 如何理解js中的this关键词？
事件：事件触发绑定的节点；
构造函数：实例对象；
全局函数：window；
箭头函数：上级作用域的this；
箭头函数和普通函数区别：
首先写法不同，就不多说了；
this问题，箭头函数本身没有this,会去上级去找。定义时已经确定，不能更改。
箭头函数没有prototype,不能new实例对象；普通函数有。可以用call、apply、bind更改this指向；
什么情况下会用call?
构造函数继承，改变this指向继承；
原生js防抖里面也有（见下文）；
17. 之前有没有解决过跨域问题，怎么解决的？
首先解释为什么需要跨域：
浏览器它有个同源策略访问的话需要域名、端口、协议名一致才可以访问，为了防止恶意请求，修改dom节点操作等；所以就会有跨域的问题，当前面三者不一致时，就叫跨域；
之前学js的时候是script标签里面引入；
iframe也可以，但我只知道这个概念，没用过（如用过可以说）；
脚手架项目里面，会在config.json文件里面去配置proxy请求头；
18. p元素和div元素有什么区别？
div 是布局元素，没有上下边距
p 是段落元素，会有上下边距
19. css盒子模型的理解？
div的话分IE和标准盒子：
IE：border-box
【margin + content(border+padding+content)】
标准：content-box
【margin + padding + border + content】
20. 如何不设置宽高水平居中一个元素？
display:flex;
items-align:center;
justify-content:center;父盒子：position:relative;
子盒子：position:absolute;
margin-left:50%;
margin-top:50%;
transform:translate(-50%.-50%);
21. 清除浮动的方式?
这个最常用：
li::after{
clear:both;
content:'';
display:block;
}子元素外部套个盒子：clear:both;
这个方法会创建节点，性能不好；
22. 重绘和回流有什么区别？
重绘：简单来说就是重新绘画，当给一个元素更换颜色，背景，虽然不会影响页面布局，但是颜色或背景变了，会重新渲染页面，这就是重绘。
回流：当删除dom节点，或者修改宽高，改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。
怎么进行优化或减少？
1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style
2.避免使用table布局
3.避免设置多层内联样式，避免节点层级过多；
23. 响应式布局？
pc：如果网站访问量不是特别大的话可以做响应式，一般都是用Bootstrap框架实现；
移动端：一般都引入flexable.js文件实现适配，单位用的是rpx；
24. 有没有用过一些css框架？
Bootstrap、Ant design、EasyUI、elementUI等（自行补充）。
25. 当在浏览器中输入url到页面显示，过程会发生哪些事情？
dns解析，找到真正的IP地址
向服务器发起链接
浏览器发送http请求
服务器处理请求返回http
浏览器解析渲染页面
连接结束
26. web前端的优化策略？
图片懒加载
路由懒加载
减少http请求（合并多个css文件和js文件，外部引入，利用css雪碧图，）
减少cooKie的使用，
ajax请求尽量用get，因为会有客户端缓存，post没有缓存，每次请求都需要服务器处理返回数据；
移动端的优化：
首屏：图片base64编码，延迟不超过3秒，js和css内联方式到页面中，避免出现页面空白或样式问题；
数据懒加载（onReachButton事件）
预加载：link标签里面提前加载好即将访问的下一个页面。
iconfont代替图片图标，方便更改颜色，但会有兼容性问题；
touchmove节流，防抖
尽量用es6特性编写代码；
尽量避免重排重绘，图片大小，位置变化等；
27. 项目中遇到的问题，怎么解决的？
（1）vuex刷新数据丢失
用户登录成功的时候需要把用户信息存放在vuex里面，但是刷新后，数据会丢失；因为vuex的数据是存放在内存里面的，每次刷新的时候，会重新创建vuex实例，导致数据清空。
解决办法：可以刷新之前添加一个事件，beforeunload事件，把vuex数据转成字符串存储到浏览器缓存里面；
解决办法2：每次刷新重新请求数据，动态更新vuex数据；
（2）移动端布局fixed布局
一般在遇到需要固定某个组件的时候，比如键盘，搜索框，等，有的时候在触发页面touchmove的时候，会遮挡某些页面元素，或者会有错位的情况；
解决方法：讲body滚动的区域移到main内部，而header和footer的样式不变，这样就不会出现错位的情况了。
具体根据自己业务中遇到的问题来说，一定一定要有解决方案，表达出自己动手解决问题的能力。如果没有遇到特别的问题，也要准备几个，不能没有。
28. 在团队中有没有突出的亮点？
结合自己的经验和能力如实回答即可。最好可以落实到具体。
例如：
我可能在页面布局的细节上面会注意到，因为其他同事大部分是男生，有些颜色的色差，样式布局的统一性问题，颜色搭配方面可能会好点。
有的时候会给自己团队提一些业务的想法，提高项目的功能性；
比如说，之前有一个电商的项目，女生嘛，淘宝京东肯定很熟，在开发的时候发现有些地方我们可以参考现在的平台去优化一些小功能，弹框呀，动画呀，之类的。
29. package.json文件有什么作用？
相当于一个说明书
记录了当前项目的信息
打包启动项目的命令等
npm安装模块也会自动添加在这个文件里面
可以判断是开发环境还是生产环境
30. 对公司有没有什么问题？
加班问题：我之前的公司不怎么加班，不知道这么加班的情况如何？
面试问题：面试多久可以出结果，是否还有下一轮？
公司团队：公司氛围，团队建设是怎么样的？
公司福利：餐补，房补，交通补助之类的
薪资：薪资体系，薪资构成
考核指标：您设为考核前端员工的最重要指标是哪些？
该公司为啥前端只有这几个？（皮一下，看自己的面试情况哦）
有开发文档嘛？有需求文档记录嘛？
团队正在经历尚待解决的挑战呢？
公司主要用的技术栈是什么？用的什么框架？
试用期多久，有没有岗前培训考核？
31. 能说一说登录流程？（重点）
在登录页面，会带着输入的用户名和密码，调用后端接口。
后端收到请求后，验证用户名和密码。如果验证失败返回错误信息，前端返回相应错误信息；
如果验证成功，后端会给前端返回一个token值；
前端拿到token值后，降token存储到vuex或者sessionStorage里面，并实现路由跳转，显示登录成功。
前端每一次实现路由跳转的时候，要判断当前的token值是否存在，如果不存在跳回登录页，存在实现跳转。通常会封装在路由守卫中。
最后在发送其他请求的时候，一般会带上token值，一般是放在请求拦截器中，后端判断请求头中有无token,验证成功，会返回数据，验证失败，比如过期就会返回错误码，前端拿到后，清除token，返回登录页面。
32. 能说一说路由守卫函数吗？
全局路由守卫：router.beforeEach((to,from,next)=>{}), router.afterEach
组件路由守卫：beforeRouteEnter(to,from,next){}, beforeRouteLeave, beforeRouteUpdate
单个路由独享守卫：beforeEnter:()=>{}
33. js原生防抖和节流了解吗？
防抖：用户频繁操作时间过于频繁，只执行最后一次；
使用场景：input框搜索
let inp = document.querySelctor('#input1');
inp.input = debounce(function(){
console,log(this.value)
}, 2000);
function debounce(fn, delay){
return function(){
let t = null;
if(t !== null){
clearTimeOut(t)
}
t = setTimeOut(()=>{
fn.call(this) //改变this指向，指向绑定的事件
}, delay)
}
}节流：控制高频事件执行次数；
使用场景：表单提交发送请求，窗口的onResize，监听滚动条；
window.onscroll = throttle(function(){
console.log('throttle')
}, 500)
function throttle(fn, delay){
let flag = true;
return function(){
if(flag){
setTimeOut(()=>{
fn.call(this)
flag = true
},delay)
}
flag = false;
}
}三、总结
这些问题是一些主流面试问题，首先得做好这些准备。肯定有遗漏的，具体就得根据面试的公司业务和你的过往经历去思考。总结了以下经验：
1，要提前准备好八股文，一般常规的问题考不倒你，就有80%的胜券在握。
2，每个问题多去拓展，面试的过程是交流的过程，面试官很可能会根据你回答的内容继续深究下去，多去准备延展问题，可以提高你的在面试过程中的专业水平。
3，遇到不会的问题如实回答，不能瞎编乱造，保持谦虚和乐于学习的态度会给面试官留下好印象。
4，在回答不确定的问题前，多说据我的了解，据我所掌握的知识来说等等。
5，多去回答一些自己知道的知识，引导话题的走向，不熟悉不清楚的避免多嘴。
6，面试前多去了解一下公司情况，这样问的问题会显得更专业性。
文章出处登录后可见！
