一、 vue 面试题
axios
是什么?怎么使用?描述使用它实现登录功能的流程?它与fetch、ajax
的区别是什么?答案如下:
axios
是基于promise
用于浏览器和node.js
的一个http
客户端,主要用于向后台发起请求的,以及在请求中做更多的控制- 支持
promise
,提供了一些并发的方法,提供拦截器,提供支持CSRF
,跨站请求伪造 axios
与fetch
都是基于promise
的语法,后者默认是使用callback
的方式。fetch
本质上脱离xhr
是新的语法,有自己的特性,默认不传cookie
,不要想xhr
这样去监听请求的进度- 登录功能的流程,
http request
拦截器,判断是否存在token
,如果存在的话,则对每个http header
都加上token
。http response
拦截器,返回401
清除token
信息并跳转到登录页面,返回接口的错误信息
Vuex
是什么?怎么使用?哪种功能场景使用它?答案如下所示:
Vuex
是一个专门为vue
构建的状态集管理,主要是为了解决组件间状态共享的问题,强调的是集中式管理- 主要是便于维护,便于解耦,所有不是所有的项目都适合使用
vuex
,如果不是构建大型项目,使用vuex
,反而会使你的项目代码繁琐多余 vuex
的核心是state、mutations、getters、actions 和 modules
- 说出
4
个vue
当中的指令和它的用法,答案如下所示:
v-if
条件渲染指令,代表存在销毁v-bind
绑定指令,用来绑定属性,简写方式是:
v-on
坚持事件指令,简写方式是@
v-for
循环指令
- 导航钩子有哪些?它们有哪些参数?答案如下所示:
- 导航钩子就是路由的生命周期函数,
vue-router
- 它分为两种,一种全局的,另一种是局部的
- 全局的钩子函数,
beforeEach
是在路由切换开始时调用,afterEach
是在路由切换离开时调用 - 局部到单个路由,
beforeEnter
- 组件的钩子函数,
beforeRouterEnter、beforeRouterUpdate 和 beforeRouterLeave
to
表示即将进入的目标对象,from
表示当前导航要离开的导航对象,next
表示是一个函数调用resolve
执行下一步
v-model
是什么?vue
中标签怎么绑定事件?答案如下所示:
vue
中利用v-model
来进行表单数据的双向绑定- 实际上只做了两步,
v-bind
绑定了一个value
的属性,利用v-on
把当前的元素绑定到了一个事件上
Vue
组件封装的过程,如何封装一个Vue
组件?答案如下所示:
- 封装组件主要就是为了解耦,通用组件必须具备高性能、低耦合的特性,往往在通用组件中留一个插槽
- 自定义组件
data
必须是一个函数,这是为了防止组件与组件之间声明的变量互相影响
swiper
插件从后台获取数据没问题,css
代码也没有问题,但是图片不动,应该怎么解决?答案如下所示:
- 主要原因是
swiper
提前初始化了,而这个时候数据还没有完全出来 - 解决方法有两个方向,一个从
swiper
入手,一个是从vue
入手 vue
中专门提供了一个方法nextTick()
, 用于解决dom
的先后执行问题
vue
路由懒加载的理解,答案如下所示:
- 路由懒加载,也叫延迟加载,即在你需要的时候加载
vue-loader
的理解,答案如下所示:
vue-loader
就是一个加载器,能把vue
组件转化成Javascript
模块- 转义这个
vue
组件,可以动态的渲染一些数据 - 优化了
script
中可以直接使用ES6、Style
,也默认可以使用sass
,还提供了作用域的选择 - 在开发阶段中,还提供了热加载
- 用过插槽吗?用的是具名插槽还是匿名插槽?答案如下所示:
- 在
vue
中,插槽包括三种,分别是默认插槽( 匿名插槽)、具名插槽和作用域插槽。 - 匿名插槽是没有名字的,只要是默认的,都会填到这里,而具名插槽是具有名字的
- 说说你对于
vue
中虚拟DOM
的理解,答案如下所示:
- 虚拟
DOM
就是以JS
对象形式去添加DOM
元素 - 本质上是优化了
diff
算法,采用了新旧DOM
的对比获取差异的DOM
,一次性更新到真实的DOM
上 - 虚拟
DOM
本身也有自己的缺陷,适合批量修改DOM
,尽量不要跨层级修改DOM
,设置key
, 可以最大的利用节点
- 如何理解
Vue
中的MVVM
模式,答案如下所示:
MVC
是指model、view 和 controller
MVVM
是指model、view 和 viewModel
,vue
是专注于view
和viewModel
这样的框架
Vue
中的keep-alive
的作用,答案如下所示:
keep-alive
能够让不活动的组件 “活着”,提供了include
和exclude
两个属性允许组件有条件的缓存- 实现的原理是在
created
的时候将需要缓存的vnode
节点放到cache
中,在render
的时候根据name
再进行取出来