前端面试题及答案2019

--------------------------------------面试题-----------------------------------------1 vuex的五个状态VueX 是一个专门为Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成vue 组件里的某些data )。

Vue有五个核心概念，state, getters, mutations, actions, modules。

state => 基本数据==datagetters => 从基本数据派生的数据==computedmutations => 提交更改数据的方法，同步！ ==methodsactions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex2 vue周期(钩子函数) created可获取数据Mounted可操作DOMVue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。

通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

分为三个阶段：初始化、运行中、销毁。

beforeCreate：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作Created：挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取beforeMount：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取Mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿Updated：当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dombeforeDestroy：当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等Destroyed：组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以钩子函数的的实际应用beforecreate : 举个栗子：可以在这加个loading事件created：在这结束loading，还做一些初始化，实现函数自执行mounted ：在这发起后端请求，拿回数据，配合路由钩子做一些事情beforeDestroy：你确认删除XX吗？destroyed ：当前组件已被删除，清空相关内容3 cookie、localstroge、localSeesion的区别共同点：都是保存在浏览器端，且同源的。

区别：安全性、大小、有效期、作用域1 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。

而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

2存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

4 get和post区别get参数通过url传递，post放在request body中。

传递路径get请求在url中传递的参数是有长度限制的，而post没有。

长度限制get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

安全get请求只能进行url编码，而post支持多种编码方式编码方式get请求会浏览器主动cache，而post支持多种编码方式。

get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。

保存GET和POST本质上都是TCP链接，并无差别。

但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

5 你是如何操持登录1利用Token实现APP登录成功后，服务器以某种方式，如随机生成N位的字符串作为Token，同时设置一个有效期，存储到服务器中，并返回Token给APP。

后续APP发送请求时，都要带上该Token，每次服务器端收到请求时，都要验证Token和有效期，Token数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。

(这种方式目前使用的最多)2利用Cookie实现APP登录成功后，服务器创建一个包含session_id和Expires两个属性值的Cookie，存储在服务器中，并发送给APP。

后续APP发送请求时，都要带上一个包含此session_id的Cookie，每次服务器端收到请求时，都要验证session_id和有效期，session_id数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。

6 vue怎么实现双向数据绑定vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。

其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。

这也正是Vue不兼容IE8以下的原因。

发布者-订阅者模式：订阅是请求在某些事件(event)到达时可以通知它并执行对应的动作(action)，而发布则相对的是向订阅告知事件(event)已经到达，你可以执行对应的动作(action)了。

7 promise 的简述Promise 是异步编程的一种解决方案，通俗的来讲Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。

应用场景1 解决回调地狱比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参2 promise 可以实现在多个请求发送完成后再得到或者处理某个结果最简单的实现基于上面的应用场景发现promise可以有三种状态，分别是pending、Fulfilled、Rejected。

Pending Promise对象实例创建时候的初始状态Fulfilled 可以理解为成功的状态Rejected可以理解为失败的状态构造一个Promise实例需要给Promise构造函数传入一个函数。

传入的函数需要有两个形参，两个形参都是function类型的参数。

分别是resolve和reject。

Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）当状态变为resolve时便不能再变为reject，反之同理。

基本api(1)new Promise(2)PromiseObj.then(resolveFn,rejectFn)resolveFn：就是Promise对象成功的回调处理函数，指向resolverejectFn：就是Promise对象失败的回调处理函数(3)Promise.all() 这个静态方法的参数是一个可迭代的对象,这个对象的item应该都是promise对象，若不是的话，就会先调用上面的Promise.resolve(item)方法转换成新的promise对象。

Promise.all()方法返回的也是一个promise对象。

(4)PromiseObj.resolve() 将一个值，数字，字符串...转换为Promise对象(5)Promise.reject(reason) 方法返回一个用reason拒绝的Promise。

你可以这样理解，返回的这个promise对象在初始化的时候，什么都没有做，直接给reject(‘your reject reson’)8 es6的了解es6是一个新的标准，它包含了许多新的语言特性和库，是JS实质性的一次升级。

新增模板字符串` `（为JavaScript提供了简单的字符串插值功能）箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。

）for-of（用来遍历数据—例如数组中的值。

）for (let index of ['a', 'b'].keys()) {console.log(index);}arguments对象可被不定参数和默认参数完美代替。

ES6将promise对象纳入规范，提供了原生的Promise对象。

增加了let和const命令，用来声明变量。

增加了块级作用域。

let命令实际上就增加了块级作用域。

ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const 命令class命令声明的全局变量，不属于全局对象的属性。

还有就是引入module模块的概念9 路由拦截主要是利用vue-router提供的钩子函数beforeEach()对路由进行判断。