Vue 先执行父组件mounted再执行子组件mounted

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

在子组件的 mounted 中，调用接口，将数据坐标点添加到地图上。

<!-- 父组件 parent-component.vue -->
<template>
  <div class="map" id="map"></div>
  <child-component></child-component>
</template>

<script>
export default {
  data() {
    return {
      map: null
    }
  },
  mounted() {
    // 创建地图实例
    this.map = new BMap.Map('map')
  }
}
</script>

<!-- 子组件 child-component.vue -->
<template>
  <div>...</div>
</template>

<script>
export default {
  mounted() {
    // 下面这一行是模拟调用接口的情况，返回一个数据
    let point = this.$ajax.getPoint()
    // 创建一个点，将点添加到地图中
    this.$parent.map.addOverly(point)
  }
}
</script>

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

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

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

父子组件生命周期执行顺序
父组件先进行创建，在挂载(mounted)前，子组件进行创建+挂载，子组件挂载完成后父组件挂载。
整个顺序就是：

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

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

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

// 父组件
beforeMount() {
    window.parentMounted = this._isMounted    // _isMounted是当前实例mouned()是否执行 此时为false
},
async 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