常用面试题4

1、如何让一个元素水平垂直居中

通过给父元素设置CSS样式：
display:flex;
align-items:center;
justify-content:center;

2、Var，let和const的区别

var 属于函数作用域,有变量提升,可以重复声明
let 属于块级作用域,没有变量提升,不能重复声明
const 属于块级作用域,没有变量提升,变量不能被修改,不可以重复声明,存在暂时性死区

3、普通函数和箭头函数有什么区别

箭头函数的 this 永远指向其上下文的 this ，任何方法都改变不了其指向;箭头函数全部都是匿名函数, 书写方式: =>
普通函数的this指向调用它的那个对象;普通函数大多为具名,少部分会用匿名函数

4、详细说说你对闭包的理解

内部函数访问外部函数的变量,函数嵌套函数
闭包两个作用，一是读取函数内部的变量，二是让这些变量的值始终存在内存之中
在原生js中，函数中变量的作用域仅属于它所在的函数作用域，在函数执行完后将会被回收机制清理，内存也会被收回，但是我们如果在里面添加了一个闭包，那么通过闭包可以访问上级作用域的原因，即使上级函数执行完，作用域也不会销毁，在此处的子函数便是闭包，此时它具有了范文上级作用域的权限，即使上级函数执行完，上级函数的作用域也不会销毁

5、浏览器输入url到页面加载全过程

浏览器构建HTTP Request(瑞快死它)请求
网络传输
服务器构建HTTP Response(瑞死bang死) 响应
网络传输
浏览器渲染页面

6、什么是回流和重绘

重绘:修改字体颜色背景颜色等不会影响页面布局
回流:元素隐藏,修改元素大小,内外边距等会影响页面布局

7、什么是原型链，谈谈你的理解

原型链：只要是对象就有原型，原型就是对象，因此只要定义了一个对象，那么我们就可以找到他的原型，如此反复操作就可以构成一个对象的序列，这个结构就是原型链

8、什么是事件冒泡

事件由具体的dom节点 接收，然后逐级向上传播到不具体的节点

9、说说Vue的生命周期

vue实例对象从创建到销毁的过程,
Vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和dom渲染两大重要功能
Beforecreate 创建前
Created 创建后
Beforemount 挂载前
Mounted 挂载后
Beforeupdate 更新前
Updated 更新后
Beforedestory 销毁前
Destoryed 销毁后
Activated 激活前
Deactivated 激活后

10、data为什么是函数

如果data是对象的话，由于对象是引用类型，组件被复用的话，就会创建多个实例。本质上，这些实例用的都是同一个构造函数。这样就会影响到所有的实例，所以为了保证组件不同的实例之间data不冲突，data必须是一个函数

11、Vue组件通信有哪些方法

vuex 就是一个仓库，仓库里放了很多对象。在state中存放数据源，
当组件要更改state中的数据时,必须通过mutation进行,mutation储存的是改变state中数据的操作方法，
之后通过actions储存的操作去触发mutation中的方法,
由组件中的$store.dispatch(‘action名称’,data1)来触发。然后由commit()来触发mutation的调用,间接更新state父传子：在父组件自定义属性名传递数据，在父组件在引入和挂载子组件，在父组件使用它，在标签上绑定你想传入的数据，在子组件上用props接受数据，并且使用它子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件

12、Watch和computed的区别

computed： 计算属性。 (存放着需要计算的数据)
该数据的值, 通过依赖目标的改变，而改变。
例如：
a = 1 + 5 + 4;
watch : 监听属性 (存放着需要监听的数据)
当监听的数据发生改变时，其他相对应的数据也发生改变

13、说说你对hash和history的理解，history模式刷新出现空白怎么解决

在最明显的显示上：hash模式的URL中会夹杂着#号，而history没有。
Vue底层对它们的实现方式不同:
hash模式是依靠onhashchange事件(监听location.hash的改变)
history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改
当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有路径path的(例如www.libai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面
如何解决:
假如我的项目没有放在服务器根目录下，放在了服务器的nice/app下，那么打开地址是：http://123. com/nice/app
　　　 那么这里问题就来了，我们配的路由中并没有nice/app，所以无法找到路径中的组件，所以也就无法渲染了。这就是导致空白的原因!

此时只需要修改router中的index.js，给路由中加一个base的属性，值为 ‘/nice/app/’就可以了

14、v-if和v-show的区别

共同点:都能控制元素的显示和隐藏
不同点:
v-if为DOM渲染属性, 通过添加删除DOM节点实现
v-show属于css渲染, 通过css的display:none实现
15、说一下路由导航守卫的用法
全局守卫：beforeEach, afterEach
局部守卫：
beforeRouteEnter:因为当守卫执行前，组件实例还没被创建,不能获取组件实例的this
beforeRouteUpdate: 在当前路由改变，但是该组件被复用时调用，可以访问组件实例 this
beforeRouteLeave:导航离开该组件的对应路由时调用，可以访问组件实例 this
每个守卫方法接收三个参数
to:目标路由对象
from:准备要离开的路由
next():进行管道中的下一个钩子。可传递参数有布尔值false，直接写路径’/‘或{path:’/’},回调函数

16、Vue双向数据绑定的原理

VUE实现双向数据绑定的原理就是利用了 Object.defineProperty()
这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调

17、说一说你对vuex的理解

Vuex是一个专为vue.js应用程序开发的状态管理模式
在main.js中引用,在src里面创建一个store文件,state里面存放的是数据,mutation存放的同步逻辑.action是异步逻辑,getter是计算属性,module是模块化管理
它可以实现多组件状态管理，可以方便的实现组件之间的数据共享
一般是在组件之间的状态、音乐播放、登录状态、加入购物车使用
在state中存放数据源，
当组件要更改state中的数据时,必须通过mutation进行,mutation储存的是改变state中数据的操作方法，
之后通过actions储存的操作去触发mutation中的方法,
Getters是计算属性,modules是模块化管理,使每一个模块拥有自己的state,getter,mutations,actions
由组件中的$store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 ,
间接更新 state

18、谈谈你对axios的了解

Axios是一个基于promise网络请求库，作用于node.js和浏览器中,它可以发送数据请求,是一个异步请求

19、说说你对spa单页面应用的理解

单页面应用是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。
所有的页面内容都包含在这个所谓的主页面中，内容较多时首页加载速度比较慢
优点：数据驱动、组件化、轻量、简洁
缺点：
不支持低版本的浏览器，最低只支持到IE9；
第一次加载首页耗时相对长一些；
不可以使用浏览器的导航按钮需要自行实现前进、后退。
不利于seo