2024年最新Vue父组件mounted执行完后再执行子组件mounted，我总结了24家大厂100份面试题英语翻译

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我们在父组件中的 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() {

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】