关于父子组件mounted执行的顺序及问题

关于 父子组件 的生命周期的执行顺序:

        父组件:beforeCreate
        父组件:created
        父组件:beforeMount
        子组件:beforeCreate
        子组件:created
        子组件:beforeMount
        子组件:mounted
        父组件:mounted

所以根据上述的顺序,如何保证父组件 mounted 结束后再进行子组件 mounted ?

解决: 由于打印的this 看指向及相关的属性发现,this中会有_isMounted这个属性,表示当前是否挂载完毕(true:挂载完毕,false:没有挂载完成),在父组件挂载前将 _isMounted 存在 window 中,挂载后更新 _isMounted。在子组件 mounted 中添加定时器,根据 _isMounted 判断是否执行初始化方法;

// 父组件
beforeMount() {
    window.parentMounted = this._isMounted    // _isMounted是当前实例mouned()是否执行 此时为false
},
async mounted() {
    //  进行对应的方法请求
    window.parentMounted = this._isMounted    // _isMounted是当前实例mouned()是否执行 此时为true
}

 

// 子组件
mounted() {
    let pMountedTimer = window.setInterval(() => {
        if (window.parentMounted ) {
            window.clearInterval(pMountedTimer)
            // 下面就可以写子组件想在mounted时执行代码(此时父组件的mounted已经执行完毕)
            
        }
    }, 500)
}

这样就可以解决子组件中的mounted等待父组件mounted加载完成后再去初始化实例;

  • 7
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 的生命周期钩子函数指的是在组件实例化、渲染、更新和销毁等不同阶段执行的一些特定函数。下面是 Vue 组件的生命周期钩子函数及其执行顺序: 1. beforeCreate:在实例创建之前被调用。此时组件的数据和方法都还未初始化。 2. created:在实例创建完成之后被调用。此时组件的数据已经初始化,但 DOM 还未渲染。 3. beforeMount:在组件挂载到 DOM 之前被调用。此时模板已经编译完成,但还未挂载到页面中。 4. mounted:在组件挂载到 DOM 后被调用。此时组件已经被渲染并插入到页面中,可以进行 DOM 操作。 5. beforeUpdate:在数据更新之前被调用。此时组件还未重新渲染,但数据已经更新。 6. updated:在数据更新之后被调用。此时组件已经重新渲染,可以进行 DOM 操作。 7. beforeDestroy:在组件销毁之前被调用。此时组件还存在,可以进行一些清理工作。 8. destroyed:在组件销毁之后被调用。此时组件已经从 DOM 中移除,事件监听和定时器等资源都已经被销毁。 对于父子组件,它们的生命周期钩子函数的执行顺序如下: 1. 父组件的 beforeCreate 和 created 钩子函数执行。 2. 子组件的 beforeCreate 和 created 钩子函数执行。 3. 子组件的 beforeMount 钩子函数执行。 4. 子组件mounted 钩子函数执行。 5. 父组件的 beforeMount 钩子函数执行。 6. 父组件mounted 钩子函数执行。 7. 数据更新时,先执行组件的 beforeUpdate 钩子函数,然后执行组件的 beforeUpdate 钩子函数,再执行组件的 updated 钩子函数,最后执行组件的 updated 钩子函数。 8. 组件销毁时,先执行组件的 beforeDestroy 钩子函数,然后执行组件的 beforeDestroy 钩子函数,最后执行组件的 destroyed 钩子函数,再执行组件的 destroyed 钩子函数。 这是 Vue 组件生命周期钩子函数的一般执行顺序,但

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值