Vue生命周期结合导航守卫执行顺序

不要通过console.log( this )去输出引用值,console.log并非JavaScript正式部分,是由宿主环境添加进去,不同环境有不同实现。在chrome浏览器打印的是对象当时的快照信息,当展开对象时候,会去内存读对象的属性值。所以可能会造成一种错觉。必要时使用打断点或debugger、序列化为字符串输出查看最新状态。

对照官网:完整的导航解析流程

  1. 导航被触发
  2. 调用 失活 组件守卫:beforeRouteLeave
  3. 调用 失活 组件:deactivated(keep-alive下才有)
  4. 调用全局守卫:beforeEach
  5. 调用 重用 组件守卫:beforeRouteUpdate
  6. 调用路由守卫:beforeEnter
  7. 解析异步路由组件
  8. 调用 激活 组件守卫:beforeRouteEnter
  9. 调用全局守卫:beforeResolve
  10. 导航被确认
  11. 调用全局守卫:afterEach
  12. 触发DOM更新(以下顺序成立前提:子组件没有通过v-if状态false变为true)
    (-------同步加载子组件,即import Test from “./components/Test.vue”-------)
    • 父组件: beforeCreate
    • 父组件: created
    • 父组件: beforeMount
    • 子组件: beforeCreate
    • 子组件: created
    • 子组件: beforeMount
    • 父组件前置守卫回调函数:beforeRouteEnter next
    • 失活父组件: beforeDestroy
    • 失活子组件: beforeDestroy
    • 失活子组件: destroyed
    • 失活父组件: destroyed
    • 子组件: mounted
    • 父组件: mounted
    • 父组件: activated(keep-alive下才有)

以上是自己实践过得出(其中beforeDestroy和destroyed在beforeRouteEnter next前还是后,没确定),方便之后忘记回过来复习的。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值