前端面试题vue—(vuex工作流程、vue-router导航守卫、keep-alive组件、 v-show VS v-if、vue中key的作用、assets和static的区别)

· 简述Vuex工作流程

1、通过dispath来触发actions提交修改数据操作
2、再通过actions的commit来触发mutations来修改数据
3、mutations接收到commit的请求，就会自动通过mutate来修改state里的数据
4、最后由store触发每一个调用它的组件就更新视图了
vuex的作用：项目数据状态集中管理，复杂组件（兄弟组件）的数据通信问题

· vue-router导航守卫（钩子函数）

1、全局守卫：无论访问到哪个路径都会触发全局的钩子函数
beforeEach-前置钩子，进入之前
参数：to（去哪）、from（从哪来）、next（是否跳转由它决定）
使用场景：没登录去下单，跳到登录页
afterEach-后置钩子，进去之后
参数：to（去哪）、from（从哪来）
使用场景：改变浏览器title
2、单个路由：写在路由配置中，只有访问到这个路径，才能触发钩子函数
beforeEnter-进入路由表中的某个路由之前
参数：同beforeEach
3.组件级：写在组建中，访问路径，即将渲染组建的时候触发
beforeRouterEnter-进入某个组件前
参数：同beforeEach
使用场景：进入这个组件前要做什么初始化操作
beforeRouterUpdate-组件服用时触发
参数：同beforeEach
使用场景：复用组件时
beforeRouterLeave-离开组件
参数：同beforeEach
使用场景：清除定时器等

· 详述keep-alive组件

keep-alive是Vue的内置组件，能在组件切换过程中，将组件状态保留在内存中，防止重复渲染DOM，降低渲染成本。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，它自身不会渲染一个 DOM 元素，也不会出现在父组件链中

keep-alive的属性和方法
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

keep-alive的生命周期-重要
1、activated：来缓存组件状态，页面第一次进入的时候，钩子触发的顺序是created>mounted>activated，之后再进入页面的时候，不会触发created，只会触发activated，也就是activated在这时代替了created。
2、deactivated ：页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

· v-show VS v-if的区别

· vue中key的作用

key的作用让每个item（虚拟数据，虚拟dom）有一个唯一的识别身份，可以下标值index或者id, 主要是为了vue精准的追踪到每一个元素，高效的更新虚拟DOM。

· assets和static的区别