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
    评论
Vue生命周期钩子函数执行顺序如下: 1. beforeCreate: 在实例初始化之后,数据观测和事件配置之前被调用。此时,组件的属性和方法还未初始化。 2. created: 在实例创建完成后被立即调用。此时,组件的属性已经完成初始化,但DOM还未生成,无法访问到el选项。 3. beforeMount: 在挂载开始之前被调用。此时,模板编译已经完成,但还未将挂载的DOM替换为真实的DOM。 4. mounted: 在挂载完成后被调用。此时,组件已经被挂载到DOM上,可以访问到挂载的DOM元素。 5. beforeUpdate: 数据更新时,DOM重新渲染之前被调用。此时,组件的数据已经更新,但DOM还未重新渲染。 6. updated: 数据更新且DOM重新渲染完成后被调用。此时,组件的数据已经更新,并且DOM已经重新渲染。 7. beforeDestroy: 在实例销毁之前被调用。此时,组件还未被销毁,仍然可以访问到组件的数据和方法。 8. destroyed: 在实例销毁之后被调用。此时,组件已经被销毁,无法再访问到组件的数据和方法。 需要注意的是,父组件和子组件的生命周期钩子函数执行顺序是先父后子。也就是说,父组件的钩子函数会在子组件的钩子函数之前被调用。例如,父组件的created钩子函数会在子组件的created钩子函数之前被调用。这样可以确保父组件在子组件之前完成一些初始化的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue常见面试题:Vue生命周期以及父子组件钩子函数的执行顺序?(超详细)](https://blog.csdn.net/weixin_53934815/article/details/129092938)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue钩子函数以及父组件的8个钩子和子组件的8个钩子的先后执行的顺序](https://blog.csdn.net/m0_57262819/article/details/124653331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值