Vue父组件mounted执行完后再执行子组件mounted

...

现在这样可能会报错，因为父组件中的 map 还没创建成功。必须确保父组件的 map 创建完成，才能使用 this.$parent.map 的方法。

那么，现在的问题是：如何保证父组件 mounted 结束后再进行子组件 mounted ？

深入分析

===================================================================

你需要了解父子组件生命周期的执行顺序

父子组件生命周期执行顺序

---

父组件先进行创建，在挂载(mounted)前，子组件进行创建+挂载，子组件挂载完成后父组件挂载。

整个顺序就是：

父组件：beforeCreate

父组件：created

父组件：beforeMount

子组件：beforeCreate

子组件：createc

子组件：beforeMount

子组件：mounted

父组件：mounted

可以看出是先子组件 mounted 之后父组件 mounted，那么，如何实现父组件 mounted 完毕后再子组件 mounted 呢？

解决办法

===================================================================

【思路】 通过打印 this 发现，有一个 _isMounted 属性，表示当前是否挂载完毕（true：挂载完毕，false：没有挂载完成），在父组件挂载前将 _isMounted 存在 window 中，挂载后更新 _isMounted。在子组件 mounted 中添加定时器，根据 _isMounted 判断是否执行初始化方法。

// 父组件

beforeMount() {

window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为false

},

mounted() {

await GaodeMap().then(() => {

// …

})

window.parentMounted = this._isMounted // _isMounted是当前实例mouned()是否执行 此时为true

}

// 子组件

mounted() {

let pMountedTimer = window.setInterval(() => {

if (window.parentMounted ) {

window.clearInterval(pMountedTimer)

// 下面就可以写子组件想在mounted时执行代码（此时父组件的mounted已经执行完毕）

this.initData()

}

}, 500)

}

[拓展]生命周期执行顺序

=============================================================================

• 子组件更新过程

• 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

• 父组件更新过程

• 影响到子组件： - 父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

• 不影响子组件： - 父beforeUpdate -> 父updated

• 销毁过程

• 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

g-jny0Ktrr-1713576240447)]

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-c4HGHEvE-1713576240447)]

[外链图片转存中…(img-S6T86vlW-1713576240448)]