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生命周期探究（二）