我知道你们大概最感兴趣的大概的面试题，所以我把它放在最前面
前言：每个人的面试官的问题一般都是根据你自己的简历上问的问题，所以最主要的就是把简历写好，然后在猜测自己的简历上面的面试官大概会问的问题，写下来记住。大多面试官都会让你先自我介绍，好方便他们看简历以及判断你是否紧张和语言表达如何。所以一定要准备一份好的自我介绍，网上到处都是，改改就行。然后还要准备你简历上项目的项目描述和你的个人职责。
面试题
- H5的新特性
语义标签、增强型表单、Canvas绘图、地理定位、SVG绘图、拖放API、WebWorker、WebStorage、WebSocket
- CSS3的新特性
word-wrap 文字换行
text-overflow 超过指定容器的边界时如何显示
text-decoration 文字渲染
text-shadow文字阴影
gradient渐变效果
transition过渡效果 transition-duration：过渡的持续时间
transform拉伸，压缩，旋转，偏移等变换
animation动画
- ES6的新特性
const\let 、模板字符串、箭头函数、set\map、for..in
- 垂直居中对齐的方法
①定位：（常用方法,推荐）
position:absolute;
position:relative;
left:值;
top:值;
②display:table-cell;
③外边距：margin-left:值;
margin-top:值;
④margin:auto;（不兼容低版本的IE浏览器）
⑤弹性盒模型：display:flex;（常用方法,推荐）
justify-content:conter;
align-itens:center;
⑥用transform的属性translate平移，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用。
使用top:50%; left:50%;时，是以盒子的左上角为原点定位，是左上角的原点居中，但是元素本身并不居中。
transform：translate(-50%，-50%):分别向左向上移动自身长宽的50%，使其位于中心。
transform: translate(-50%,-50%)导致的像素模糊问题解决办法：
/** 这 0.5px加或者减都可以 */
transform: translat(calc(-50% + 0.5 px), calc(-50% + 0.5 px))；
⑦用calc计算
- flex换行
flex-wrap
- computed和watch的区别
computed:缓存，data不变不会重新计算，提高性能
watch:不缓存，监听数据必须是data中声明过或者父组件传递过来的props中的数据，当数据变化时，触发其他操作，函数有两个参数，
- 怎么使用echart
自行回答
- 为何使用vue
1. 组件化开发
2. 单页面路由
3. 丰富的Api方法
4. 双向的数据绑定
5. 单向数据流
6. 易于结合其他第三库
7. 最适合于构建视图项目，移动端项目
- 钩子函数
全局导航钩子（跳转前进行判断拦截） 全局路由守卫
router.beforeEach(to, from, next),全局前置守卫
router.beforeResolve(to, from, next),全局的解析守卫
router.afterEach(to, from ,next) 全局的后置守卫
组件内钩子 路由独享的守卫
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
单独路由独享组件
beforeEnter 组件内的守卫
- vue-router传参的方法
query传参和params传参
- vue的生命周期
1.beforeCreate(){}
创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除
2.created(){}
创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性
3. beforeMount(){}
模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改
4.mounted(){}
当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素
4. beforeUpdate(){}
当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化
当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改
6.updated(){}
数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构
5. beforeDestroy(){}
当前生命周期中我们需要做事件的解绑 监听的移除 定时器的清除等操作
6. destroyed(){}
当前生命周期执行完毕后会将vue与页面之间的关联进行断开
当<keep-alive>包裹动态组件的时候会触发两个新的生命周期
7. activated 当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
8. deactivated 缓存状态的时候触发
- vue组件通信
1.父子组件props和this.$emit
2.ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值
3.事件总线：使用一个 空的 VUE 实例作为事件总线，自定义事件event.$on event.$off event.$emit
4 provide inject组件通信
5.vuex
- axios如何进行交互的
自行回答
- wepack打包
自行回答
- promise
promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了。
- 箭头函数与普通函数的区别
箭头函数是匿名函数，不能作为构造函数，不能使用new
箭头函数不绑定arguments，取而代之用rest参数...解决
箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
箭头函数没有原型属性
箭头函数不能当做Generator函数,不能使用yield关键字
- cookie与localStorage、sessionStorage的区别
相同点：
cookie、sessionStorage和localStorage都用在客户端存储数据，每一个都有自己的存储和到期限制
不同点：
一、存储大小
cookie数据大小不能大于4K；
localStorage和sessionStorage则可以达到5M；
二、有效时间
cookie在设置的有效期内一直有效；
localStorage存储持久数据，只要不手动清除则一直存在；
sessionStorage数据在当前浏览器关闭后就会被自动清除
三、数据与服务器间的交互方式
cookie的数据会自动传递到服务器端，服务器端也可以写cookie到客户端
localStorage和sessionStorage不会把数据自动传到服务器端，仅在本地存储
- post与get的区别
**请求方式****GET****POST**参数位置参数拼接到url的后面参数在请求体中参数大小受限于浏览器url大小，一般不超过32K1G服务器数据接收接收1次根据数据大小，可分多次接收适用场景从服务器端获取数据向服务器提交数据安全性参数携带在url中，安全性低相对于GET请求，安全性更高
- let\const\var的区别
var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
- css实现三角形
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
- 属性的权重
1.id选择器（#id）
2.类选择器（.class）
3.标签选择器（div，h1，p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[title]）
9.伪类选择器（a:hover，li:nth-child）
1.优先级就近原则，同权重情况下样式定义最近者为准；
2.载入样式以最后载入的定位为准；
3.!important > id > class > tag；
4.important 比 内联优先级高，但内联比id要高；
1、第一等：代表内联样式，如: style=””，权值为1000。
2、第二等：代表ID选择器，如：#content，权值为0100。
3、第三等：代表类，伪类和属性选择器，如.content，权值为0010。
4、第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
5、通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
6、继承的样式没有权值。
- 闭包
闭包的概念
当一个函数内部嵌套另一个函数，子函数可以访问到父级函数中的变量，就是闭包。严格来说，闭包产生的三个条件
1.必须是嵌套关系 2.内部函数访问其所在的作用域 3.在所在作用域外被调用
闭包的作用与应用场景
作用一 使变量在内存中保存不被销毁。
作用二，延长了函数内局部变量的作用范围。
- 原型链
每一个原型都有自己的原型，原型都有自己的原型，一直到Object,他的原型是null，形成原型链
- 前端如何实现获取唯一id值
时间戳
- watch如何实现深度监听
watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听
- 如何实现适配
- this的指向
1.普通函数，定时器，立即执行
this -> window
2.obj.fun1()
this -> obj
3. var obj = new Object()
this -> obj
4. <button onclick="fun3(this)">点击</button>
this -> button[绑定的对象]
5.fun3.call({name:'liujie'})
this -> {name:'liujie'}
6.es6 箭头函数的this 继承外层函数调用的 this
- vue中的data为何是个函数
让每个返回的实例都可以维护一份被返回对象的独立的拷贝。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。
- call、apply的共同点与区别
三个函数的作用都是将函数绑定到上下文中，用来改变函数中this的指向；三者的不同点在于语法的不同。
fun.call(thisArg[, arg1[, arg2[, ...]]])
fun.apply(thisArg, [argsArray])
所以 apply和 call的区别是 call方法接受的是若干个参数列表，而 apply接收的是一个包含多个参数的数组。
而bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
var bindFn = fun.bind(thisArg[, arg1[, arg2[, ...]]])
bindFn()
- v-if与v-show的区别
v-show通过css display控制显示和隐藏，v-if组件真正的渲染好饿销毁，而不是显示和隐藏，频繁切换状态使用v-show 否则v-if
- vue常见的指令
v-html //html
v-text //元素里要显示的内容
v-bind：data //绑定动态数据 ：data
v-on：click //绑定事件 @click
v-for
v-if //条件渲染指令
v-model //双向绑定，用于表单
- 什么是 vuex？
vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）
vuex 的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求，拿到数据）、getters（根据之前的状态派发新的状态）、modules（模块划分）
state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据
应用场合：购物车的数据共享、登入注册
- 双向绑定的原理
双向数据绑定最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的.
先是从data里面的数据msg通过绑定到input控件和p标签上。然后input上通过v-on:input监听控件，触发change()。
调用方法都可以默认获取e事件，e.target.value是获取调用该方法的DOM对象的value值。把value值在赋给data里的msg，就是实现了双向数据绑定的原理了。
项目面试
- 你是如何实现适配的
<meta name="viewport" content="width=device-width, initial-scale=1.0">
rem, em, 百分比
框架的栅格布局
media query媒体查询
手淘团队的一套flexible.js, 自动判断dpr进行整个布局视口的放缩
- .描述一下你的项目和你的职责
- 你一般如何使用什么框架
- vue-router常用路由模式
hash默认，h5 histroy需要服务端支持
37 vue的性能优化
1.合理使用v-if和v-show，
2.合理使用computed，
3.v-for加key，
4.自定义事件，dom事件及时销毁，
5.合理使用异步组件，
6.合理使用keepalive，
7.data层级不要太深，
8.使用vue-loader在开发环境做模板编译，
9.前端通用性能优化（如图片懒加载/减少 HTTP请求数/合理设置 HTTP缓存/资源合并与压缩/合并 CSS图片/将 CSS放在 head中/避免重复的资源请求/切分到多个域名），
10.使用ssr
38.vue 的指令用法
v-html //html
v-text //元素里要显示的内容
v-bind：data //绑定动态数据 ：data
v-on：click //绑定事件 @click
v-for
v-if //条件渲染指令
v-model //双向绑定，用于表单
39.vue页面之间的传参
1.使用vue-router通过跳转链接带参数传参。
2.使用本地缓存localStorge。
3.使用vuex数据管理传值
其他面试
- 期望薪资
- 大学成绩
- 兴趣爱好
- 有没有女朋友 俩人以后的职业规划
- 个人职业规划
- 成就感
- 团队协作经历
- 为什么学习前端
- 手上有别的offer吗
上面都是根据我的简历，面试官问的问题。应该还有我有点忘了，后面记得再补
心得体会
刚开始修改好自己的简历后，投到各个平台的招聘网站，如Boss,智联，拉钩，前途无忧。在投入简历之前，首先放在就前途无忧进行填写线上的，因为前途无忧里面的线上简历比较全，在别的地方复制一下就行。然后就开始整理自己的学习资料，写与简历有关的猜测的面试题，项目描述，自我介绍。然后就是长期的背。面试题背的好，成功一大半。那一段时间的面试经历是我一直都不想回忆的。那段时间脑子里面全是面试题，睡也睡不着，一大早上还得去面试。天天都困死，晒死。如所有的求职者一样，刚开始都是碰壁的，问的啥都不会。虽然会感到丧气，但不要轻易放弃就好。总结常规面试题和“特别”面试题记住就好。慢慢的你就清除大概就是这样子，差不多的面试题，也不会那么紧张了，这是一个好现象。有几点值得注意的是，一定要好好检查自己的简历，地方，时间，事情等等。与HR沟通时候给别人看简历，如果不对会有影响的。第二点就是在选择自己的公司地址时候刚开始因为你基本上过不了，所以可以选择远点的，然后再选择近点的。第三点不一定所有的HR都要回，如果你觉得太远或者没兴趣的话等等原因就可以，因为所有人的时间都宝贵。
4482
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
