父子组件嵌套下的生命周期钩子函数执行顺序

在 Vue.js 中,当父组件包含一个或多个子组件时,组件的生命周期钩子函数的执行顺序遵循一定的规则。下面是父子组件嵌套情况下常见的生命周期钩子函数的执行顺序:

  1. 父组件:

    • beforeCreate:父组件的 beforeCreate 钩子首先执行,表示父组件实例创建之前的阶段。
    • created:父组件的 created 钩子在 beforeCreate 之后执行,表示父组件实例创建完成的阶段。此时父组件的数据已经初始化,但子组件尚未被创建。
    • beforeMount:父组件的 beforeMount 钩子在 created 之后执行,表示父组件开始挂载到 DOM 上的阶段。
    • mounted:父组件的 mounted 钩子在 beforeMount 之后执行,表示父组件已经挂载到 DOM 上的阶段。此时父组件及其子组件都已经被创建并挂载到 DOM 上。
  2. 子组件:

    • beforeCreate:子组件的 beforeCreate 钩子在父组件的 mounted 钩子之前执行,表示子组件实例创建之前的阶段。
    • created:子组件的 created 钩子在 beforeCreate 之后执行,表示子组件实例创建完成的阶段。此时子组件的数据已经初始化。
    • beforeMount:子组件的 beforeMount 钩子在 created 之后执行,表示子组件开始挂载到 DOM 上的阶段。
    • mounted:子组件的 mounted 钩子在 beforeMount 之后执行,表示子组件已经挂载到 DOM 上的阶段。此时子组件的 DOM 元素已经可以访问。

需要注意的是,父组件和子组件的生命周期钩子函数是相互独立的,它们的执行顺序并不是严格的父在前子在后或子在前父在后的顺序。父组件和子组件的生命周期钩子函数会在各自的生命周期阶段按照特定的顺序执行。

此外,如果父组件的数据发生变化,会触发父组件的 beforeUpdate 和 updated 钩子函数,同时也会触发子组件的 beforeUpdate 和 updated 钩子函数。

总结起来,父子组件嵌套下的生命周期钩子函数执行顺序是:

  1. 父组件:

    • beforeCreate
    • created
    • beforeMount
    • mounted
  2. 子组件:

    • beforeCreate
    • created
    • beforeMount
    • mounted

父组件和子组件的生命周期钩子函数执行顺序是并行的,不是严格的父在前子在后的顺序。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
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 ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值