前端面试题及答案2019

--------------------------------------面试题-----------------------------------------

1 vuex的五个状态

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

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

state => 基本数据==data

getters => 从基本数据派生的数据==computed

mutations => 提交更改数据的方法，同步！==methods

actions => 像一个装饰器，包裹mutations，使之可以异步。

modules => 模块化Vuex

2 vue周期(钩子函数) created可获取数据Mounted可操作DOM

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载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完成，可以操作更新后的虚拟dom

beforeDestroy：当经过某种途径调用$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数值对且在有效期内，服务器返回所需要的结果，否则返回错误信息，提示用户重新登录。