面试实战问题总结
1. JWT的认证流程—token原理分析
客户端将用户名和密码发送到服务器，服务端进行校验，成功后将token返回给客户端，客户端将token进行存储（使用sessionStorage、localStorage方法进行存储），存储完后再次进行请求时，新的请求都会携带这个token发送到服务端，服务端进行校验，如果校验通过就允许客户端去访问服务端开放的接口
传统认证流程是用户将用户名和密码发送到服务器，服务器进行校验后将token存储在服务器中，然后向客户端返回一个session_id存入Cookie中，接着发送新的请求时，会通过Cookie将session_id传入服务器进行校验
这种模式扩展性不好，如果发生服务器集群或是跨域时，推荐使用token的校验模式。
2. post返回的是一个promise对象，要使用async、await来进行简化
3. 客户端如何存储token数据
token存储在浏览器中的sessionStorage，因为token信息只在当前网站打开期间有效
4. 路由守卫—通过它来控制页面访问权限
如果用户没有登录，使用URL访问特定页面，需要重新跳转到登录页面进行登录，登录成功后才能进行访问。
路由导航守卫基本语法：为路由对象添加beforeEach函数，该函数需要一个回调函数作为参数（第一个参数to表示将要访问的地址；from表示从哪个地址跳转来的；next表示继续执行的函数
router.beforeEach((to,from,next)=> {
if(to.path==='/login') return next()
const tokenStr=window.sessionStorage.getItem('token')
if(!tokenStr) return next('/login')
next()
})
5. 退出功能
使用element-ui里的按钮组件，为按钮绑定一个点击事件，在medthods节点下该点击事件处理函数中将sessionStorage中存储的token值进行clear删除window.sessionStorage.clear()，再使用编程式导航重定向到login页面this.$router.push('/login')
6. 怎样将token数据发送到服务端
必须将token数据放到请求头中的Authorization字段
7. 生命周期（获取都dom元素最早在哪）
beforeCreate()在这个函数中只有实例本身的一些事件和生命周期函数
Created()最早开始访问data和methods中的数据
beforeMount()在内存中已经编译好模板，但还没有渲染到页面上
Mounted()内存和页面已经同步 在这个方法中最早操作dom节点
beforeUpdate()在内村中更新完成，但还没有渲染页面
Updated()内存和页面已经同步
beforeDeatroy（迪斯踹）()销毁之前 但还可以访问data和methods的数据
Deatroyed()完全销毁
8. 父子传值
\1. 父向子：父组件通过v-bind属性绑定向子组件共享数据，子组件使用props接收数据
\2. 子向父：子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据
\3. 父子之间双向同步：v-model指令
9. 兄弟之间（原理）
eventBus.js这种方法通过一个空的 Vue 实例作为事件中心，用它来（emit）触 发 事 件 和（on）监听事件，实现了任何组件间的通信
如何如何传值的？
-
在src目录中新建一个bus.js,在这个文件中要导出一个空的vue实例 -
在传输数据的组件中引入bus.js,通过Bus.$emit(“事件名”,要传输的数据)来派发事件 -
在接受数据的组件中引入bus.js,通过bus.$on(“自定义事件”，（res）=>{ })来监听事件----res就是要接受的数据
10. css只在当前页面有效
11. 怎么获取dom节点
1.通过ID获取（getElementById）
该方法返回一个DOM对象。
2.通过类名（getElementsByClassName）
该方法返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。
3.通过name属性（getElementsByName）
4.通过标签名（getElementsByTagName)
该方法返回的也是一个集合。
5.获取html的方法 （document.documentElement）
document.documentElement是专门获取html这个标签的
6.获取body的方法（document.body）
document.body是专门获取body这个标签的。
7.通过css选择器获取一个元素（querySelector）
此方法直接返回DOM对象本身。
8.通过选择器获取一组元素（querySelectorAll）
总结：
所有获取DOM对象的方法中，只有getElementById()和querySelector()这两个方法直接返回的DOM对象本身，可直接为其绑定事件。
getElementXXX类型的方法，除了通过Id获取元素，其他都返回一个集合，如果需要取到具体的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>获取class为box的所有元素中的第一个DOM元素。
querySelector()与querySelectorAll()两者的联系与区别：
联系： 两者括号中的取值都是选择器
区别： 当有多个class相同的元素时，使用querySelector()方法只能获取到第一个class为box的元素，而querySelectorAll()获取到了所有class为box的元素集合。
vue获取dom：
我们常用ref获取，要在mounted中使用，因为只有在执行mounted的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，vue中尽量不去操作dom元素，选用ref操作属性获取。
12. flex还有哪些属性
常见父级属性
- flex-direction： 设置主轴的方向
flex-direction:row; 从左到右 (默认值)
flex-direction:row-reverse 从右到左排序
flex-direction: columm 从上到下
flex-direction:columm-reverse 从下到上
- justify-content： 设置主轴上的子元素排列方式
justify-content:flex-start 从头部开始
justify-content:flex-end 从尾部对齐
justify-content:center 在主轴居中对齐
justify-content:space-around 平分剩余空间
justify-content:space-between 先两边贴边 在评分剩余空间(重要)
- flex-wrap：设置子元素是否换行 默认不换行
nowrap 不换行 (默认值)、wrap 换行
- align-items： 设置侧轴上的子元素排列方式（单行）
align-items:flex-start 从上到下 (默认值)
align-items:flex-end 从下到上
align-items:center 挤在一起居中(垂直居中) 如果想要居中对齐 就要添加 justify-content:center;
align-items:stretch 拉伸(默认值) 继承父盒子高度(注意：子盒子不能给高度)
- align-content 设置侧轴上的子元素排列方式(多行)
align-content:flex-start 在侧轴的头部开始排列(默认值)
align-content:flex-end 在侧轴的尾部开始排列
align-content:center 在侧轴中间显示
align-content:space-around 子项在侧轴平分剩余空间
align-content:space-between 子项在侧轴先分布在两头，在平分剩余空间
align-content:stretch 设置子项元素高度平分父元素高度
- flex-flow 复合属性
flex-direction:column
flex-wrap:wrap
flex-flow:column wrap 等价于上面两句代码
常见子项属性
1.flex子项占的份数
2.align-self控制子项自己在侧轴的排列方式
3.order属性 定义子项的排列顺序(前后顺序)
* 数值越小排列越靠前，默认为0。
* 注意：和z-index 不一样
13. 路由跳转时传参有哪些方法
1、query方式
步骤：
- 在router-link的to属性设置
? to=“path?参数名=值&参数名=值……”
- 在目标路径上需要通过 this.$route.query.参数来获取
2、params方式
3、vuex传值
4、LocalStorage，SessionStorage、cookie的方式
14. 事件修饰符
.prevent阻止默认行为（a链接的跳转）
.stop 阻止事件冒泡
.once 绑定的事件只触发一次
15. echarts怎么使用
步骤1:下载并引入echarts 文件（图表依赖这个js库）
步骤2:准备一个具备大小的DOM容器（生成的图表会放入这个容器中）
步骤3:初始化eacharts 实例对象（实例化echarts 对象）
步骤4：指定配置项和数据（根据具体需求修改配置选项）
步骤5:将配置项设置给echarts 实例对象（让echarts 对象根据修改好的配置生效）
第一步：安装echarts—在命令行中输入npm install echarts --save
第二步：引入—在main.js文件中，引入echarts
第三步：使用—在需要展示echarts的页面中，添加下列代码
mounted() {
var myChart = this.$echarts.init(document.getElementById('echartsExample'))
myChart.setOption({
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
})
},
16. JS判断数组的5种方式
let arr = []
1.instanceof
arr instanceof Array
2. proto
arr.proto === Array.prototype
3. constructor
arr.constructor === Array
4. Object.prototype.toString
Object.prototype.toString.call(arr) === ‘[object Array]’
5. Array.isArray
Array.isArray(arr)
其中方法1，2，3 主要是通过原型去判断的， 4是通过object类型的副属性class去判断的，其中函数的class是Function，结果是[object Function]， 普通的对象是Object，结果是[object Object]，5是es6新增的方法
17. 数据类型判断？
六大数据类型：number、string、boolean、undefined、null、object、
ess6新增：symbol（森宝）（独一无二的值）
判断数据类型的方法：
-
typeof：可以判断基本数据类型（null会返回object），但是如果遇到的引用数据类型会返回object（function会返回function），不起作用的 -
instanceof：可以检测引用数据类型，检测基本数据类型失效（除非用构造函数创建）（null和undefined会报错） -
constructor：它似乎完全可以应对基本数据类型和引用数据类型（null和undefined会报错），但是如果 声明了一个构造函数，并且把他的原型指向了Array（而瑞二）的原型，他就有点力不从心了（） -
object.pritotype.toString.call判断数据类型的一种完美的解决方案所有数据类型都能精准的判断出来 Object.prototype.toString.call()（） 完美的解决方案
18. 原型和原型链
原型：每个对象都下有一个proto，每个函数对象下都有一个prototype 属性。这个两属性就是原型
原型链：对象的proto 指向构造函数的prototype构造函数prototype的proto指向Object.prototype，Object.prototype的proto指向null
19. 事件冒泡、事件捕获
DOM事件流分为3个阶段：捕获、当前目标、冒泡
事件冒泡：点击子节点会向上触发父节点以及祖父节点的点击事件，是从里向外依次触发父级节点上事件的过程；
事件捕获：是通过添加事件监听的方式来捕获父级节点上的同名事件，事件触发的方式是从外向里的；
向水里扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡。
有些事件是没有冒泡的：
onblur、onfocus、onmouseenter、onmouseleave
20. 说一下从输入 URL 到页面加载完中间发生了什么?
- DNS解析
- TCP 连接
- 发送 HTTP 请求
- 服务器处理请求并返回需要的数据
- 浏览器解析渲染页面
- 连接结束
21. 垮域及其常用的解决方式
产生跨域的情况有三种：不同协议，不同域名，不同端口，以及域名和ip地址的访问都会产生跨域。跨域是浏览器的做出的限制，和后端没关系
1.jsonp
实现原理：利用动态创建script标签请求后端接口地址，然后传递callback参数，后端接收到后经过数据处理，返回callback中的参数就是json
优点：浏览器兼容性好，
缺点：只支持 get 请求方式
2.代理
前端代理在vue中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxyTable来配置跨域的
3.cors
cors全程叫跨域资源共享，主要是后台工程师设置后端代码来表达到前端跨域请求的
现在主流框架都是用代理跨域实现的
优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete 等）
缺点：浏览器支持有版本要求，如下：
chrome:13+,firefox:3.5+,IE 11+,edge:12+
22. 如何实现水平垂直居中
一、已知宽度和高度的元素
1.子绝父相，子元素：
top: 0; right: 0; bottom: 0; left: 0; margin: auto;
left: 50%; top: 50%; margin-left: 元素宽度的一半px; margin-top: 元素高度的一半px;
二、未知高度和宽度的元素
1.子绝父相，子元素：
left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
2.使用flex布局，父元素：
display: flex; justify-content: center; align-items: center;
23. 清除浮动的方法
1.额外标签法：为浮动元素末尾添加一个空的标签，为这个空标签：clear: both; // or left
2.父级添加overflow:hidden
3.:after伪元素法：在浮动的的div上再添加一个clearfix类名：.clearfix:after { content: '.'; height: 0; display: block; clear: both; }
4.双伪元素清除浮动:
24. vue双向数据绑定原理
实现mvvm的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。
25. vue组件通信有哪些方式
父子之间
- 父向子：父组件通过v-bind属性绑定向子组件共享数据，子组件使用props接收数据
- 子向父：子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据
- 父子之间双向同步：v-model指令
兄弟之间
- eventBus.js这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（emit） 触 发 事 件 和（on）监听事件，巧妙而轻量地实现了任何组件间的通信
后代
- 父传子孙：父组件通过provide对子孙组件共享数据，子孙组件通过inject接收数据
vuex
- vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；
26. 怎么将数据渲染到页面上
首先找到对应请求的数据接口通过ajax或者axios向后端发起请求，请求到数据后如果是数组咱们需要遍历。遍历完后通过模版引擎或者字符串拼接或者咱们vue差值表达式进行数据渲染
27. v-if和v-for 的优先级
当 v-if和v-for 处于同一标签中， v-for的优先级 是大于 v-if的
28. 什么标签没有边框
div
29. vue全家桶包括哪些
vue + vuex (状态管理) + vue-router (路由) + vue-resource +axios +UI框架（iview、vant、elementUI等等）
30. 路由导航守卫有几种，如何实现
应用场景：在路由跳转之前根据条件判断是否要终止路由的跳转或者跳转别的路径
作用：路由钩子主要作用是拦截导航，让他完成跳转或者取消跳转
全局路由守卫
分三个钩子函数
router.beforeEach全局前置守卫
router.beforeResolve全局解析守卫
router.afterEach全局后置守卫
路由独享守卫
一个钩子函数beforeEnter表示路由跳转之前
定义在路由配置上
组件内守卫
beforeRouterEnter路由进入
beforeRouterUpdate路由更新(参数的更新)
beforeRouterLeave路由离开
定义在组件内都有三个参数
to表示将要跳转到的组件(目标组件)
from代表将要跳出的组件(现有组件)
next()是一个函数表示进入下一个组件的钩子函数
next(false)阻止跳转，中断导航
next(路径名)进入指定的组件的钩子函数to 将要跳到
from 即将跳出
next()继续往下走 跳转到下一个组件钩子函数 next(true)
next(false)终止条状
next(path)跳转到目标路径
31. get和post区别
最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数
在我大万维网世界中，TCP就像汽车，我们用TCP来运输数据，交通规则HTTP给汽车运输设定了好几个服务类别，有GET, POST, PUT, DELETE等等，HTTP规定，当执行GET请求的时候，要给汽车贴上GET的标签(设置method为GET)，而且要求把传送的数据放在车顶上(url中)以方便记录。如果是POST请求，就要在车上贴上POST的标签，并把货物放在车厢里，而不同的浏览器(发起http请求)和服务器(接受http请求)就是不同的运输公司。业界不成文的规定是，(大多数)浏览器通常都会限制url长度在2K个字节，而(大多数)服务器最多处理64K大小的url。GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。GET产生一个TCP数据包;POST产生两个TCP数据包。
缓存
vue好处
|