Vue父子组件钩子函数调用顺序

深碍√TFBOYSˉ_ 2022-09-07 12:22 146阅读 0赞

参考：[https://blog.csdn.net/csdn\_yudong/article/details/113035397][https_blog.csdn.net_csdn_yudong_article_details_113035397]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

结果：

![20210823155119296.png][]

通常我们在父组件中的mounted中执行initMap（）来初始化地图对象（其他钩子函数中执行initMap()将不会渲染出地图），而在上面的测试中我们可以看到子组件的mounted要比父组件的mounted先执行，导致子组件中获取的map为空对象。因此现在我们要考虑一种方式，可以先执行父组件的mounted，后执行子组件的mounted（只有这样子组件中才能获取父组件传过来的Map对象）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

beforeMount() {
        // _isMounted是当前实例mouned()是否执行 此时为false
        window.parentMounted = this._isMounted;
      },
      mounted() {
        //父组件中初始化地图对象map
        //this.initMap();//在这里执行初始化操作
        // _isMounted是当前实例mouned()是否执行 此时为true
        window.parentMounted = this._isMounted;
      },

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

mounted() {
        let pMountedTimer = {}; //定时器
        pMountedTimer = setInterval(() => {
          if (window.parentMounted) {
            //在这里执行初始化
            this.addDrawLayer();
    
            clearInterval(pMountedTimer); //清除定时器
          }
        }, 1000);
      },

此外，还可以先不加载子组件，即最开始先把子组件的v-if设为false，想使用子组件时直接把子组件v-if设为true即可

[https_blog.csdn.net_csdn_yudong_article_details_113035397]: https://blog.csdn.net/csdn_yudong/article/details/113035397
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20220829/a4a4b7df52a448358d6f982055641dad.png
[20210823155119296.png]: /images/20220829/b0a794203b9d4024ac85427fd815e53a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20220829/f2b9c6aca6884b8db93a8312ccf142bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20220829/9cdbac488031457082b6b7781591623b.png