前端面试题（三）

一、简述vuex的工作流程。

什么是vuex：vuex是一个专门为vue.js应运程序开发的状态管理模式

我们在组件中可以通过this.$store.dispath提交一个action，在action中我们可以执行一系列异步操作。或者根据不同的情况分发不同的mutation，接着在action中调用commit触发mutation方法，所有修改state的操作全部全都放在mutation中来做。只要state中的数据发生了改变，那么组件中应用到数据的所有视图都会更新。

二、v-router导航首位（钩子函数）

1、全局导航首位

router.beforeEach 全局前置首位

当一个导航触发时，前置守卫最先触发。

router.beforeResolve (v 2.5.0+) 全局解析守卫 和beforeEach类似

区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用 即在 beforeEach 和 组件内beforeRouteEnter 之后

router.afterEach 全局后置守卫

在所有路由跳转结束的时候调用。

2、路由导航首位

beforeEnter 路由前置守卫

可直接定义在路由配置上，和beforeEach方法参数、用法相同。

3、组件路由守卫

beforeRouteEnter 在渲染该组件的对应路由被确认前调用,用法和参数与beforeEach类似

beforeRouteUpdate 在当前路由改变，并且该组件被复用时调用

beforeRouteLeave 导航离开该组件的对应路由时调用，可以访问组件实例 this，next需要被主动调用，不能传回调。

三、详述keep-alive组件

1、为什么使用keep-alive？

在Vue中，我们使用component内置组件或者vue-router切换视图的时候，由于Vue会主动卸载不使用的组件，所以我们不能保存组件之前的状态，而我们经常能遇到需要保存之前状态的需求，例如搜索页（保存搜索记录），列表页（保存之前的浏览记录）等等

2、keep-alive的作用？

keep-alive是一个Vue的内置组件，它能将不活动的组件保存下来，而不是直接销毁，当我们再次访问这个组件的时候，会先从keep-alive中存储的组件中寻找，如果有缓存的话，直接渲染之前缓存的，如果没有的话，再加载对应的组件。

作为抽象组件，keep-alive是不会直接渲染在DOM中的.

3、keep-alive的属性？

keep-alive提供了三个可选属性

include - 字符串或数组或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或数组或正则表达式。名称匹配的组件不会被缓存。

max - 数字类型。表示最多可以缓存多少组件实例。

4、对于keep-alive需要知道的事情？

keep-alive提供了两个生命钩子，分别是activated与deactivated。因为keep-alive会将组件保存在内存中，并不会销毁以及重新创建，所以不会重新调用组件的created等方法，需要用activated与deactivated这两个生命钩子来得知当前组件是否处于活动状态。

四、v-show与v-if的区别

在条件为真的情况下v-if与v-show都渲染数据，在条件为假的情况下v-if不渲染数据，v-show渲染数据但将不符合条件的display：none；

v-if有更高的切换成本，v-show有更高的渲染成本。频繁的切换建议使用v-show。

五、vue中key的作用

在diff算法中，Vue使用 key 值来判断元素是否发生更改，以达到重复使用页面上所有可复用元素，特别是在列表渲染中，Vue通过key值来判断元素是否需要更新，如果元素只是更换位置的话，就不需要重新渲染，这也是为什么我们在列表渲染的时候为什么始终不建议使用元素的索引值来作为 key 值，因为索引值始终会发生改变，会增加Vue的渲染成本。

六、assets和static的区别

static该目录下的文件不会被webpack处理，他们会被直接复制到最终的打包目录下面的。并且必须使用绝对路径来引用这些组价。
assets中的文件夹会经过webpack打包，并重新编译。

七、computed 、 methods、 watch的区别

 computed 计算属性是基于内部的响应式依赖进行计算缓存的，所谓的响应式依赖就是被我们vue实例所监听的数据。

computed计算属性是拥有缓存的，我们每次访问同一个计算属性，只要内部依赖没有发生改变，它都不会重新计算。

methods 方法是调用函数，我们多次使用就等于多次调用这个函数，函数是没有内存的，所以每次都重新计算，每次渲染都会被重新调用。

@

  watch 监听器用来监听属性，执行异步操作，不具有缓存性，只要监听的对象发生了改变就会立即执行