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

最新推荐文章于 2025-05-15 18:00:00 发布

Hope瑶瑶瑶~☆

最新推荐文章于 2025-05-15 18:00:00 发布

阅读量569

点赞数 7

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/confidence_fy/article/details/139981596

版权

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

        父组件：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加载完成后再去初始化实例；