大大大前端面试题
大大大前端面试题
作为一个前端小白白,自己整理了一些个人觉得比较重要的面试题,话不多说咱们开始正题。
(一)简述Vuex工作流程
要说到Vuex的工作流程,咱们就先说说什么是Vuex,vuex就是一个专门为Vue应用程序开发的状态管理模式。状态可以理解为数据,其实vux就是用来管理我们的数据的。那我们就接着说说他在什么情况下使用。
1.多个视图依赖同一个状态:
A组件,B组件,C组件用的是同一套数据,这个时候我们需要放在Vuex中进行统一管理。
如果多个视图是同一级的不存在嵌套关系,我们可以不用Vuex,只需要通过父组件传递到每个子组件即可;如果组件深层嵌套,那么用Vuex将会更加方便,我们只需要在Vuex中拿就可以了
2.来自不同的视图的行为需要变更同一状态
用户操作A组件去改变B组件的状态,这个时候我们需要通过修改Vuex中的数据,Vuex的数据是响应的,那么就会改变和它相关的组件状态。
备注:
在项目当中并不是说非要使用Vuex,而是根据你所写的项目大小以及数据交互的程度来决定,是否需要使用Vuex,如果你不打算开发大型单页应用,使用Vuex可能是比较繁琐的,确实是如此———如果你的应用够简单,你最好不要使用Vuex。一个简单的 global event bus就足够你的所需了, global event bus在这里就不多说了,毕竟主角不是它,咱们有机会再谈。但是,如果你需要构建的是一个中大型单页面应用,你很有可能会考虑如何更好的在组件外部管理状态,Vuex将会成为自然而然的选择。扯远了,扯远了,咱们回归主题。看下图
我组织了一下语言,来给大家说一下我觉得的Vuex工作流程:
在vuex组件里,通过dispath来触发actions,来提交修改数据的请求,然后通过actions的commit来触发mutation来修改数据,mutations收到commit的请求然后就会自动通过mutate来修改state,最后store会触发所有调用过他的组件的更新。
(二)vue-router导航守卫(钩子函数)
概念
导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或取消
拦截方式
- beforeEach - 前置钩子函数
- 参数to、from、next
- to:去哪里
- from:从哪里
- next():是否跳转由他决定
- 参数to、from、next
- afterEach - 后置钩子函数
- 参数to、from
- to:去哪里
- from:从哪来
- 使用场景:改变浏览器title
- 单个路由独享的
- beforeRouterEnter - 进入组件前
- 参数to、from、next
-同beforeEach
- 使用场景 - 进入这个组件前你要做什么初始化操作- beforeRouteUpdate - 组件更新或改变时
- 参数to、from、next
- 同beforeEach
- 使用场景 - 复用组件时(对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候)
- 参数to、from、next
- beforeRouteUpdate - 组件更新或改变时
- beforeRouteLeave - 离开组件时
- 参数to、from、next
- 同beforeEach
- 使用场景 - 清除定时器等等