2018最新高频web前端面试题

之前写了好多的web前端面试题，今天给大家分享一下2018最新高频web前端面试题！


第一题：vuex的存储流程

State

（1）Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data。

（2）state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。

mutations：用于同步操作比如会员登录的信息，购物车里的商品等等。

Actions：用于异步操作比如将数据用ajax存放到数据库。

Getters

（1）getters 可以对State进行计算操作，它就是Store的计算属性。
（2）虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用。
（3）如果一个状态只在一个组件内使用，是可以不用getters。

第二题：父传子、子传父、兄弟传值与vuex的区别

父传子：

父组件传过来的值子组件要用props接收。

子传父：

vue2.0中可以使用$emit来向父组件派发事件，父组件中用$on来监听自定义的事件。

第三题：双向绑定的原理

vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。

在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。

属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的get和set就是属于存取描述符对象的属性。

第四题：created与mounted的区别

看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。

在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素。

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）

第五题：websocket原理

websocket处于应用层，也是基于TCP实现的。websocket与http同样建立于tcp传输协议之上，通过tcp传输层进行数据传输。

websocket是长连接，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，但仍然还是无状态的。

WebSocket设计上天生为HTTP增强通信，将会在即时IM通讯，游戏等领域会得到更广泛的利用。

如何说：websocket和http一样是基于tcp传输的，websocket是一个长连接，可以在一个tcp连接上传输多个http请求，所以咱们在做IM通讯的时候不必担心自动断开，只有页面关闭时才能断开或是咱们使用close()方法强行断开。

第六题：说一下promise的理解

promise是es6的一种异步请求构造函数，接收一个参数，是函数，并传入两个参数resolve，reject(可以见到的理解成功后和失败后的回调函数)，在我们封装好函数的最后，会return出promise对象，promise对象的原型上有then、catch等方法，then方法中我们协议拿到我们在调用resolve时可以传递的参数并形成promise链，调用reject时，promise链就被破坏了，reject之后的promise都不会再执行，而是直接调用.catch方法；Promise的优势在于，可以在then方法中继续写promise对象并返回，然后继续调用then来进行回调操作。

promise解决回调地域，解决了异步数据执行顺序，比如我们用的axios，就是用promise封装了ajax，那么现在的ajax2也就是fetch用的也是promise。

第七题：路由传参

This.$router.push({path:’/goods’,query:{id}})
This.$route.query.id
This.$router.push({path:’/goods’,params:{id}})
This.$route.params.id

第八题：axios与jq的ajax和vue-resource的区别

Vue-resource

体积小；支持主流浏览器（不支持ie9-）;支持promiseAPI和URL templates;支持拦截器。

Axios

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换 JSON 数据
客户端支持保护安全免受 CSRF/XSRF 攻击
组件的优势
提高开发效率
方便重复使用
简化调试步骤
提升整个项目的可维护性
便于协同开发
如：导航、列表、弹窗、下拉菜单等

第九题：生命周期

beforeCreate 初始化之前
created 初始化完成
beforeMount 挂载之前
mounted 挂载完成之后
beforeUpdate 数据更新之前
updated 数据更新之后
beforeDestroy 解除绑定之前
destroyed 解除绑定之后

适应场景：

beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用  mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

第十题：生命周期的理解

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。
创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，$el还没有。
载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后：当data变化时，会触发beforeUpdate和updated方法。
销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

第十一题：v-if与v-show的区别

使用了v-if的时候，如果值为false，那么页面将不会有这个html标签生成。
v-show则是不管值为true还是false，html元素都会存在，只是CSS中的display显示或隐藏
v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
因此，如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。

第十二题：vue的hash和history的区别

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

第十三题：vue的优缺点

Vue和React不同点：

Vue：
1.模版和渲染函数的弹性选择
2.简单的语法及项目创建
3.更快的选软速度和更小的体积
2）React:  1.更适用于大型应用和更好的可测试性
2.同时适用web端和原生App
3.更大的生态圈带来更多的支持和工具

Vue和React相同点：

1.利用虚拟DOM实现快速渲染
2.轻量级
3.响应式组件
4.服务器端渲染
5易于集成路由工具，打包工具以及状态管理工具
优秀的支持和社区

第十四题：Vue.js与其他框架的区别？

1.与angularjs的区别
相同点：
都支持指令：内置指令和自定义指令。
都支持过滤器：内置过滤器和自定义过滤器。
都支持双向数据绑定。
都不支持低端浏览器。
不同点：
(1).AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
(2).在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。
Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
对于庞大的应用来说，这个优化差异还是比较明显的。
2.与React的区别
相同点：
react采用特殊的JSX语法，Vue.js在组件开发中也推崇编写.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用。
中心思想相同：一切都是组件，组件实例之间可以嵌套。
都提供合理的钩子函数，可以让开发者定制化地去处理需求。
都不内置列数AJAX，Route等功能到核心包，而是以插件的方式加载。
在组件开发中都支持mixins的特性。
不同点：
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
Vue.js在模板中提供了指令，过滤器等，可以非常方便，快捷地操作DOM。
四.应用场景：
针对具有复杂交互逻辑的前端应用；
它可以提供基础的架构抽象；
可以通过AJAX数据持久化，保证前端用户体验
好处：
当前端和数据做一些操作的时候，可以通过AJAX请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据。特别是移动端应用场景，刷新页面太昂贵，会重新加载很多资源，虽然有些会被缓存，但是页面的DOM,JS,CSS都会被页面重新解析一遍，因此移动端页面通常会做出SPA单页应用。
Vue.js的特点：MVVM框架、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。

第十五题：slot插槽的使用

答：就是将父组件的内容放到子组件指定的位置叫做内容分发。
比如：父组件：
父组件app.vue
<template>
  <div id="app">
    <test-slot>
      <span>我是父组件里的文字，但是我要被放到子组件里</span>
    </test-slot>
  </div>
</template>

<script>
import testSlot from './components/testSlot'
export default {
  data(){
    return {

    }
  },
  components:{
    testSlot
  }
}
</script>

<style>

</style>
子组件testSlot.vue
<template>
  <div>
    <h3>test-slot</h3>
    //父组件里的span会替换掉slot所以这里的123是看不见的
    //如果父组件在使用子组件testSlot的时候不在里面加内容则这里的slot会显示出来
    <slot>123</slot>
  </div>
</template>

<script>
export default {
  data(){
    return {

    }
  }
}
</script>

<style>

</style>

第十六题：vue中nextTick的使用

答：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

你在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。使用时机：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数，此时页面并未全部渲染。在某个动作有可能改变DOM元素结构的时候，对DOM一系列的js操作都要放进Vue.nextTick()的回调函数中。

第十七题：vue的性能优化

答：
1、使用Keep-alive增加dom缓存和数据缓存。
2、使用路由懒加载
3、用webpack的页面分割，让一个很大的js按照页面的数量分割成好几个小的js做到按需加载。

第十八题：svn和git区别

答：GIT是分布式的，而SVN是集中式的
GIT把内容按元数据方式存储，而SVN是按文件：因为git目录是处于个人机器上的一个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分支，版本记录等。​
GIT分支和SVN的分支不同：svn会发生分支遗漏的情况，而git可以同一个工作目录下快速的在几个分支间切换，很容易发现未被合并的分支，简单而快捷的合并这些文件。
GIT没有一个全局的版本号，而SVN有
GIT的内容完整性要优于SVN：GIT的内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性，确保在遇到磁盘故障和网络问题时降低对版本库的破坏
git命令
Git config --global user.name 全局配置用户名
Git config --global user.email 全局配置邮箱账户
Git version 查看当前版本信息
Git int 初始化，建立与托管平台的联系
Git status 查看当前状态
Git add 添加所有的文件
Git commit -m 提交文件 t后面写的是对此次操作的一个说明或者注释
Git push 将代码推送到服务器端
Git pull 将代码从服务器端拉取到本地
Git diff 查看版本之间的冲突
Git branch 查看分之
Git branch 分支名 创建分之
Git branch -d 分支名 删除分之
Git checjout 分支名 切换到指定的分之
Git merge 分之名 将其他的分支上的内容合并到所在的分支上面

第十九题：你是如何解决跨域的？

答：ajax跨域通常都是服务端解决：比如php header("Access-Control-Allow-Origin: *");
用fetch获取接口数据可以用CORS解决
jsonp。jsonp的原理是：就是利用<script>标签的src没有跨域限制，来达到与第三方通讯的目的。

第二十题：你用vue封装过的组件吗？

答：封装过：alert、toast、模态框、上拉加载数据等。还有一些页面的组件比如，公共头 。

第二十一题：面向对象的继承有哪些？

答：call、apply、bind。

第二十二题：call、apply、bind区别？
答：call传参是字符串。apply传参四数组。bind是将对象指向为本身。

第二十三题：数组的合并？
答：用concat合并。


第二十四题：字符串翻转？
答：先用split将字符串分割成数组，再用reverse()进行翻转

第二十五题：对象合并（浅拷贝）
答：用es6的Object.assign({},{})进行对象合并，如果是数组可以用es6的Array.from，或是es6的扩展运算符...arr，如果使用es5需要用循环来做浅拷贝，如果是深拷贝需要用递归的形式来实现。

第二十六题：原型和原型链？
答：每一个对象都有__proto__即原型。
原型链：由于__proto__是任何对象都有的属性，所以会形成一条__proto__连起来的链条，递归访问__proto__最终到头，并且值是null.

第二十七题：var于let区别
var:存在变量升级，没有作用域
let:有作用域，不支持变量升级。

第二十八题：const里面的值可边吗？
如果是定义基本类型那么这个值是不可变的比如：const name=“张三”,const age=20。定义的是引用类型那么这个值是可以改变的。比如const arr=[0,1,2];arr.push(3)。但是重新赋值是不行的比如：const arr=[0,1,2];arr=[3,4]。

第二十九题：扩展运算符...的使用
1、数组合并。2复制数组。3.结构赋值。

居中
css 居中
方法1：table-cell

html结构：
<div class="box box1">
        <span>垂直居中</span>
</div>
css：
.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;       
}


方法2：display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}
方法3：绝对定位和负边距
.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }
方法4：绝对定位和0
.box4 span{
  width: 50%;
  height: 50%;
  background: #000;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
这种方法跟上面的有些类似，但是这里是通过margin:auto和top,left,right,bottom都设置为0实现居中，很神奇吧。
不过这里得确定内部元素的高度，可以用百分比，比较适合移动端。

方法5：translate

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
这实际上是方法3的变形，移位是通过translate来实现的。

方法6：display:inline-block
.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
这种方法确实巧妙...通过:after来占位。

方法7：display:flex和margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}
方法8：display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}

第三十题：vue路由的钩子函数

1、 beforeEach：每次每一个路由改变的时候都得执行一遍。一般用来做会员权限（是否登录可以访问页面）
2、 afterEach：你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身
3、 beforeRouteEnter：在渲染该组件的对应路由被 confirm 前调用。不！能！获取组件实例 `this`。因为当守卫执行前，组件实例还没被创建。
4、 beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。可以访问组件实例 `this`。
5、 beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例 `this`。

第三十一题：Vue的性能优化

1、 路由懒加载。
2、 使用webpack的require.ensure进行页面切割build之后会按照页面生成相应的js文件做到按需加载。
3、 使用keep-alive做页面缓存，多次访问相同的页面不会重新渲染数据和获取dom，如果想多次获取数据比如动态路获取数据需要传参展示不同的数据，那么需要使用钩子函数activated来解决缓存问题。

第三十二题：从用户输入网址到页面渲染完执行了什么？

1.浏览器查找域名的IP地址。
2. 浏览器给web服务器发送一个HTTP请求
3. 网站服务的永久重定向响应
4. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
5. 服务器“处理”请求，服务器接收到获取请求，然后处理并返回一个响应。
6. 服务器发回一个HTML响应
7. 浏览器开始显示HTML
8. 浏览器发送请求，以获取嵌入在HTML中的对象。在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签。这时，浏览器会发送一个获取请求来重新获得这些文件。这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等；

第三十三题：js的执行机制？

1、 JS是单线程语言
2、 JS的Event Loop是JS的执行机制
Event loop:
(1)、首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table
(2)、异步任务在event table中注册函数,当满足触发条件后,被推入event queue
(3)、同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
以上三步循环执行,这就是event loop

第三十四题：localstorage、sessionstorage、和cookies的区别？

答：
localstorage
生命周期：除非数据被清除，否则一直存在。
存放大小：5M
与服务器通信：数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信
易用性：可以用源生接口，也可再次封装来对Object和Array有更好的支持

sessionstorage
生命周期：页面会话期间可用。
存放大小：5M
与服务器通信：数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信。
易用性：可以用源生接口，也可再次封装来对Object和Array有更好的支持。

cookies
生命周期：生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效。
存放大小：4K左右（因为每次http请求都会携带cookie）。
与服务器通信：由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。
易用性：cookie需要自己封装setCookie，getCookie。

共同点：都是保存在浏览器端，和服务器端的session机制不同。