vue系列之生命周期

生命周期

《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系列之生命周期》

参考链接:vue生命周期探究(二)

    原文作者:zhouzhou
    原文地址: https://segmentfault.com/a/1190000016954473
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞