1.vue 的生命周期
| 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例创建前，组件的属性生效之前,data和$el还没有 |
| created | 组件实例已经创建，属性已存在，有了data，$el还不可用 |
| beforeMount | 组件被挂载之前 |
| mounted | 组件挂载后，此时$el存在 |
| beforeUpdate | 组件更新前 |
| updated | 组件更新后 |
| activited | keep-alive 专属，组件被激活时调用 |
| deactivated | keep-alive 专属，组件被激活后调用 |
| beforeDestroy | 组件被销毁前 |
| destroyed | 组件被销毁后 |
2. 在哪个生命周期调用异步请求？
可以在钩子函数 created ,beforeMount , mounted这三个生命周期调用，因为此时data已经创建，在服务端请求的数据可以复制给data。另外在created时更方便，有以下优势：
- 能更快获取到服务端数据，减少页面 loading 时间；
- ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；
3.父组件监听子组件的生命周期
比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现
// parent.vue
<child @mounted = 'dosomething' />
// child.vue
mounted(){
this.$emit('mounted');
}
上面需要通过手动调用emit 来触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：
// parent.vue
<child @hook:mounted = 'dosomething' />
dosomething(){
console.log('父组件监听到子组件mounted')
}
// child.vue
mounted(){
console.log('子组件触发mounted')
}
当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。
4. vue组件间的通讯方式有哪些？
- props/$emit父子组件通讯
- ref 与
children 适用 父子组件通信
* ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
* $parent / $children：访问父 / 子实例
- EventBus（
on）适用于 父子、隔代、兄弟组件通信
- 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。
listeners 适用于隔代组件通讯
* $attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。
* $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
- provide/inject适用于 隔代组件通信
- Vuex 适用于 父子、隔代、兄弟组件通信
5. vue中'route'和 '$router'的区别？
router是vueRouter的实例，相当于全局的路由器对象，里面有很多子对象和属性。如history对象，使用方法 this.$router.push()跳转。 route相当于正在跳转的路由对象。可以获取name,path,params,query等
6.路由机制
单页面应用：single page app(SPA)
1.普通应用在进行模块切换的时候，例如从首页进入购物车页的时候，需要用a标签进行页面跳转，这样的话就会有很多问题诞生：
-
页面跳转有时因为网络原因，浏览器空白时间较长，用户体验不好
-
每个逻辑页面都会出现相同的dom结构和逻辑代码
-
这个时候可以用前端路由机制或者选项卡功能来实现无刷新页面调整、无刷新内容切换的单页面应用。选项卡功能实现的时候会导致我当前页面的结构过于复杂，体积变大，响应速度变慢。
使用前端路由机制的话可以避免这个问题，前端路由就是通过检测哈希值的改变来切换某个内容区域（利用ajax获取到子模板的内容在主页面进行更换）
优点：内容切换不刷新页面，用户体验好，响应速度快
缺点：对SEO不友好
7.vue数据双向绑定的原理
vue实现数据双向绑定的原理是：Object.defineProperty()这个方法重新定义对象的获取（get)属性值和设置（set）属性值的操作来实现的。
8.vue中mutation 和 action的区别？
- 流程上：相应的视图--》 修改state分为：视图触发action，action提交mutation，来修改state；
- 角色不同：
Mutation：专注于修改state，是修改state的唯一途径
action：业务代码，异步请求； - 限制:
mutation:必须同步执行；
action：可以异步，但无法直接修改state；
9.v-on可以绑定多个方法吗？
可以
