vue生命周期

生命周期

Created: 可改变数据，不会进入beforeupdate, updated
Mounted: 特殊情况监测不到数据的变更，会进入beforeupdate, updated
beforeupdate, updated：如果发生变更的数据在模板中并没有使用（包括直接和间接，间接：比如某个依赖该数据的计算属性在模板中使用了），则不会触发更新流程！！！

生命周期钩子

1. 组件钩子：8个
   beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
2. 路由钩子
   全局路由钩子
   beforeEach、afterEach、beforeResolve
   路由独享钩子
   beforeEnter
   组件路由钩子
   beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
3. 指令的周期： 5个
   bind、inserted、update、componentUpdated、unbind

组件钩子

参考链接：Vue生命周期深入

路由钩子

全局路由钩子

beforeEach

一般在这个勾子的回调中，对路由进行拦截。

值得注意的是，如果没有调用next方法，那么页面将卡在那。

next的四种用法
1.next() 跳入下一个页面
2.next('/path') 改变路由的跳转方向，使其跳到另一个路由
3.next(false)  返回原来的页面
4.next((vm)=>{})  仅在beforeRouteEnter中可用，vm是组件实例。

afterEach

在所有路由跳转结束的时候调用，和beforeEach是类似的，但是它没有next方法

组件路由钩子

beforeRouteEnter (to, from, next)

1. 在渲染该组件的对应路由被 confirm 前调用
2. 不！能！获取组件实例 `this`
3. 因为当守卫执行前，组件实例还没被创建

beforeRouteUpdate (to, from, next)

1. 在当前路由改变，但是该组件被复用时调用
2. 可以访问组件实例 `this`

beforeRouteLeave (to, from, next)

1. 导航离开该组件的对应路由时调用
2. 可以访问组件实例 `this`

参考链接：vue生命周期探究（二）