(完整版)前端面试题及答案2019

最简单的实现
基于上面的应用场景发现promise可以有三种状态，分别是pending、Fulfilled、Rejected。
Pending Promise对象实例创建时候的初始状态
Fulfilled可以理解为成功的状态
Rejected可以理解为失败的状态
构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
beforeMount：接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
6vue怎么实现双向数据绑定
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的getter,和setter。这也正是Vue不兼容IE8以下的原因。
发布者-订阅者模式：订阅是请求在某些事件(event)到达时可以通知它并执行对应的动作(action)，而发布则相对的是向订阅告知事件(event)已经到达，你可以执行对应的动作(action)了。
Promise上还有then方法，then方法就是用来指定Promise对象的状态改变时确定执行的操作，resolve时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
当状态变为resolve时便不能再变为reject，反之同理。
基本api
(1)new Promise
//在子组件中可以使用$route.params.id来获取传递的参数值。
(4)PromiseObj.resolve()将一个值，数字，字符串...转换为Promise对象
(5)Promise.reject(reason)方法返回一个用reason拒绝的Promise。你可以这样理解，返回的这个promise对象在初始化的时候，什么都没有做，直接给reject(‘your reject reson’)
8es6的了解
es6是一个新的标准，它包含了许多新的语言特性和库，是JS实质性的一次升级。
新增模板字符串` `（为JavaScript提供了简单的字符串插值功能）
箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）
for-of（用来遍历数据—例如数组中的值。）
get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。安全
get请求只能进行url编码，而post支持多种编码方式编码方式
get请求会浏览器主动cache，而post支持多种编码方式。
get请求参数会被完整保留在浏览历史记录里，而post中的参数不会被保留。保存
GET和POST本质上都是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。
分为三个阶段：初始化、运行中、销毁。
beforeCreate：实例、组件通过new Vue()创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
Created：挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
Mounted：接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
beforeUpdate：当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
2存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
Vue有五个核心概念，state, getters, mutations, actions, modules。
state =>基本数据==data
getters =>从基本数据派生的数据==computed
mutations =>提交更改数据的方法，同步！==methods
actions =>像一个装饰器，包裹mutations，使之可以异步。
7promise的简述
Promise是异步编程的一种解决方案，通俗的来讲Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。
应用场景
1解决回调地狱比如我们经常可能需要异步请求一个数据之后作为下一个异步操作的入参
2promise可以实现在多个请求发送完成后再得到或者处理某个结果
this.$router.push({
path: `/describe/${id}`,
})
//方案一，需要对应路由配置如下：{
path: '/describe/:id',
name: 'Describe',
component: Describe
}//很显然，需要在path中添加/:id来对应$router.push中path携带的参数。
* next(‘/’)或者next({ path: ‘/’ }):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
10vue路由传值（主要使用三种方法）$router.push/name+params/path+query
方案一
getDescribe(id) {
//直接调用$router.push实现携带参数的跳转
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()对路由进行判断。
* to: Route:即将要进入的目标路由对象\$route (常用)
* from: Route:当前导航正要离开的路由
--------------------------------------面试题-----------------------------------------
1 vuex的五个状态
VueX是一个专门为Vue.js应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data )。
(这种方式目前使用的最多)
2利用Cookie实现
APP登录成功后，服务器创建一个包含session_id和Expires两个属性值的Cookie，存储在服务器中，并发送给APP。
后续APP发送请求时，都要带上一个包含此session_id的Cookie，每次服务器端收到请求时，都要验证session_id和有效期，session_id数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。
3cookie、localstroge、localSeesion的区别
共同点：都是保存在浏览器端，且同源的。
区别：安全性、大小、有效期、作用域பைடு நூலகம்
1cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
5你是如何操持登录
1利用Token实现
APP登录成功后，服务器以某种方式，如随机生成N位的字符串作为Token，同时设置一个有效期，存储到服务器中，并返回Token给APP。
后续APP发送请求时，都要带上该Token，每次服务器端收到请求时，都要验证Token和有效期，Token数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。
* next: Function:一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。
* next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed（确认的）。