1.Vue 生命周期的使用

1.beforeCreate(){}
创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除

2.created(){}
创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性

3. beforeMount(){}
 模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改

4.mounted(){}
当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素

5. beforeUpdate(){}
当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化
当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改

6.updated(){}
数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构

7. beforeDestroy(){}
当前生命周期中我们需要做事件的解绑  监听的移除  定时器的清除等操作

8. destroyed(){}
当前生命周期执行完毕后会将vue与页面之间的关联进行断开

当<keep-alive>包裹动态组件的时候会触发两个新的生命周期（详见下面第5点）

9.activated     当组件为活跃状态的时候触发(活跃状态：进入页面的时候)

10.  deactivated    缓存状态的时候触发

2.Vue路由的实现

前端路由就是更新视图但不请求页面，利用锚点完成切换，页面不会刷新

官网推荐用 vue-router.js 来引入路由模块

定义路由组件

定义路由，使用 component 进行路由映射组件，用 name 导航到对应路由

创建 router 实例，传入 routes 配置，创建和挂载根实例

用 router-link 设置路由跳转

3.Vue路由模式 

hash模式（默认） 例如：http://abc.com/#/user/10
h5 history模式  例如：http://abc.com/user/20 需要server端支持

Hash 模式地址栏中有#，history没有，history 模式下刷新，会出现 404 情况，需要后台配置

使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值

可以使用hashchange 事件来监听 hash 值的变化

HTML5 提供了 History API 来实现 URL 的变化。其中最主要的 API 有以下两个：

history.pushState() 和 history.repalceState() 。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。

4.Vue 路由传参（params 和 query）

用法上：query用 path 引入，params 用 name引入，接收参数都是类似的，分别是 this.$route.query.name 和 this.$route.params.name

url 展示上:params 类似于 post，query 类似于 get，也就是安全问题，params 传值相对更安全点，query 通过 url 传参，刷新页面还在，params 刷新页面不在了

5.keep-alive 的理解

概念：keep-alive是 vue 的内置组件，当它动态包裹组件时，会缓存不活动的组件实例，它自身不会渲染成一个 DOM 元素也不会出现在父组件链中

作用：在组件切换过程中将状态保留在内存中，防止重复渲染 DOM，减少加载时间以及性能消耗，提高用户体验。

生命周期函数：Activated 在 keep-alive 组件激活时调用，deactivated在 keep-alive组件停用时调用