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中的方法,
由组件中的
s
t
o
r
e
.
d
i
s
p
a
t
c
h
(
‘
a
c
t
i
o
n
名
称
’
,
d
a
t
a
1
)
来
触
发
。
然
后
由
c
o
m
m
i
t
(
)
来
触
发
m
u
t
a
t
i
o
n
的
调
用
,
间
接
更
新
s
t
a
t
e
父
传
子
:
在
父
组
件
自
定
义
属
性
名
传
递
数
据
,
在
父
组
件
在
引
入
和
挂
载
子
组
件
,
在
父
组
件
使
用
它
,
在
标
签
上
绑
定
你
想
传
入
的
数
据
,
在
子
组
件
上
用
p
r
o
p
s
接
受
数
据
,
并
且
使
用
它
子
传
父
:
父
组
件
向
子
组
件
传
递
事
件
方
法
,
子
组
件
通
过
store.dispatch(‘action 名称’, data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state 父传子:在父组件自定义属性名传递数据,在父组件在引入和挂载子组件,在父组件使用它, 在标签上绑定你想传入的数据,在子组件上用props接受数据,并且使用它 子传父: 父组件向子组件传递事件方法,子组件通过
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