1、异步请求适合在哪个生命周期调用？

一般在 created 里面就可以，如果涉及到需要页面加载完成之后的操作话就用 mounted；
created 阶段的优势是：请求时间比较早，页面 loading 时间相对较短；
mounted 阶段的优势是：页面已经渲染完成，如果想请求之后进行 DOM 操作的话，必须在 mounted 阶段发起请求；

2、watch、computed和methods有什么区别?

methodes每次调用时都会被从新渲染。

computed是自动监听值得变化，是依赖缓存的，假如a+b=c，只要a和b没有改变，那将直接返回c，若a和b改变，则会重新计算。

watch用于观察和监听页面上的vue实例，当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，那么watch为最佳选择。

3、组件之间怎么传值？

父传子：子组件无法直接使用父组件中的数据，通过v-bind来绑定一个自定义属性，在子组件中通过props来接收一下才可以使用，props中的数据都是父组件传过来的，只可以读取，不可以更改。

子传父：由父组件定义一个方法，通过一个自定义事件绑定上父组件定义的方法，子组件通过$emit来触发自定义事件，同时可以传参给自定义事件，然后父组件就可以通过方法的绑定，来获取到子组件传过来的值。

兄弟组件：

1. 可以先子传父然后再父传子。
2. 可以借新建一个中转的bus.js文件，然后引入vue实例化vue,发送者：bus.$emit('自定义名字'，值)，接受者：bus.$on('自定义名字'，(值)=>{})。
3. 运用vuex。

4、v-model的原理

v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为 :value="" 和 @input=""，当在input输入框输入内容时，会自动的触发input事件，更新绑定的name值，当name的值通过JavaScript改变时，会更新input的value值。

5、active-class是哪个组件属性？

Vue-router模块中的router-link组件，设置激活时的样式。

6、vue-loader是什么？用途有哪些？

是解析vue文件的一个加载器，用途是js可以写es6,style样式可以写scss或less，template可以加jade。

7、请说出vue.cli项目中src目录每个文件夹和文件的用法

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件

8、vue-router 有哪几种导航守卫?

vue-router有三个全局守卫

1. router.beforeEach 全局前置守卫进入路由之前
2. router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后 // main.js 入口文件 import router from './router'; // 引入路由 router.beforeEach((to, from, next) => { next(); }); router.beforeResolve((to, from, next) => { next(); }); router.afterEach((to, from) => { console.log('afterEach 全局后置钩子'); });

   路由独享守卫：beforeEnter

``` const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖 // ... } } ] })

```

路由组件内的守卫：

1. beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例this，组件实例还没被创建
2. beforeRouteUpdate (2.2) 路由复用同一个组件时, 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this
3. beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this

`` beforeRouteEnter (to, from, next) { // 在路由独享守卫后调用 不！能！获取组件实例this，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 可以访问组件实例this // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用，可以访问组件实例this` }

```

9.vue-router 路由模式有几种？

1. hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
2. history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
3. abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

10. v-if 和 v-show 有什么区别？

v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。
v-show只是在修改元素的css样式，也就是display的属性值，元素始终在Dom树上。

11.怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

``` {

path: '/details/:id'

name: 'Details'

components: Details

} ``` 获取传过来的值：

访问details目录下的所有文件，如details/a，details/b等，都会映射到Details组件上。当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数this.\$route.params.id

12.vue-router 传参

1.使用Params: - 只能使用name，不能使用path - 参数不会显示在路径上 - 浏览器强制刷新参数会被清空 //传递参数 this.$router.push({ name:home, params:{ number:1, code:'999' } }) //接收参数 const p=this.$router.params 2.使用Query： - 参数会显示在路径上，刷新不会被清空 - name可以使用path路径

//传递参数 this.$router.push({ name:home, query:{ numaber:1, code:'999' } }) //接收参数 const p=this.$router.query

13.vuex有哪几种属性？

有五种，分别是 State、 Getter、Mutation 、Action、 Module。

14.vuex属性的特性

Getter的特性： 1. getters 可以对State进行计算操作，它就是Store的计算属性 2. 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用 3. 如果一个状态只在一个组件内使用，是可以不用getters

State特性是 1. Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data 2. state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新 3. 它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

Mutation特性

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

15.不用Vuex会带来什么问题？

1. 可维护性会下降，想要修改数据需要维护三个地方。
2. 可读性会下降，因为一个组件里的数据，你根本就看不出来是从哪来的
3. 增加耦合，大量的上传派发，会让耦合性大大的增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。

16.Vuex中actions和mutations的区别

Mutations的更改是同步更改，用于用户执行直接数据更改，this.$store.commit('名')触发

Actions的更改是异步操作，用于需要与后端交互的数据更改，this.$store.dispath('名')触发

注意：

1. 定义actions方法创建一个更改函数时，这个函数必须携带一个context参数，用于触发mutations方法，context.commit('修改函数名'，'异步请求值')
2. mutations第一个参数必须传入state,第二个参数是新值