vue的生命周期 和 路由守卫

生命周期
beforeCreate
实例初始化之后
this指向创建的实例
数据观测（data observer）和event/watcher配置尚未完成
不能访问到methods、data、computed、watch上的方法和数据

Create
实例创建完成，并已经完成以下配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调
此时可以调用methods中定义的方法，修改data的数据，并且可触发响应式变化、computed值重新计算，watch到变更等

beforeMount
在挂载开始之前被调用
Mounted
挂载前为实例寻找了一个暂时容身之处el，编译完成($el创建完成)后替换这个容身之处完成实例的挂载
beforeUpate
这里的更新对象是模板，即需要虚拟 DOM 重新渲染和打补丁，beforeUpdate发生在以上两个流程之前，此时新的虚拟DOM已经生成
update
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，可以执行依赖于 DOM 的操作
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用，this仍能获取到实例

一般在这一步中进行：销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

内置组件(keep-alive)

activated: 组件被激活时调用；

deActivated: 组件被移除时调用；

路由守卫

全局路由
beforeEach全局前置守卫
参数to和from都是路由对象Route
next是个Function，有以下几种用法（from api文档）

• next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed
• next(false): 中断当前的导航。若浏览器的 URL 改变了（用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from
  路由对应的地址 —— 也就是说并不是单纯的中断，还会检查URL的变更以保证不会错误的进入到next路由
• next(’/’) 或者 next({ path: ‘/’ }):
  跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。可传递的参数与router.push中选项一致
• next(error): 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递router.onError() 注册过的回调

router.beforeEach((to, from, next) => {
  next()
})

beforeResolve 全局解析守卫
组件内守卫和异步路由组件被解析之后，解析守卫就被调用
即在 beforeEach 和 组件内beforeRouteEnter 之后

参数和beforeEach一致，也需要调用next对导航确认
（和beforeEach类似，区别是在导航被确认之前）

afterEach全局后置钩子
在所有路由跳转结束的时候调用
这些钩子不会接受 next 函数也不会改变导航本身
beforeEnter
可直接定义在路由配置上，和beforeEach方法参数、用法相同
组件内

beforeRouteEnter

• 此时组件实例还未被创建，不能访问this
• 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数
• 可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作
• beforeRouteEnter触发在导航确认、组件实例创建之前：beforeCreate之前；而next中函数的调用在mounted之后：为了确保能对组件实例的完整访问

beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouteUpdate

• 对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用
• 当前路由query变更时，该守卫会被调用
• vue-router推荐的数据获取方法二中，结合beforeRouteEnter使用，在路由参数变更时可以重新获取数据，获取成功再调用next()

beforeRouteLeave

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