你真的了解Vue2.0的生命周期执行顺序吗？

忘是亡心i 2022-11-17 05:05 230阅读 0赞

## 探索1：生命周期在平级子组件和父组件中的执行顺序 ##

我首先创建了两个子组件：CompOne 和 CompTwo，分别在两个组件中写入了mounted方法和created方法。

<template>
        <div>        
            <h2>子组件1</h2>    
        </div>
    </template>
    <script>    
        export default { 
            mounted() { 
                console.log("子组件1 —— mounted")
            },
            created() { 
                console.log("子组件1 —— created")
            },
        }
    </script>
    <template>
        <div>
            <h2>子组件2</h2>
        </div>
    </template>
    <script>
        export default { 
            mounted() { 
                console.log("子组件2 —— mounted")
            },
            created() { 
                console.log("子组件2 —— created")
            },
        }
    </script>

接下来呢，我们把他引到父组件（App.vue）中来看看，当然，在父组件（App.vue）中也有created和mounted方法

<template>
      <div>
        123
        <CompOne></CompOne>
        <CompTwo></CompTwo>
      </div>
    </template>
    <script>
      import CompOne from "./views/CompOne"
      import CompTwo from "./views/CompTwo"
      export default { 
        components:{ 
          CompOne, CompTwo
        },
        mounted() { 
          console.log("App —— mounted")
        },
        created() { 
          console.log("App —— created")
        },
      }
    </script>

这时候我们来看看浏览器的输出结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]  
**结论**

> 1.  不论子组件有多少，父组件的生命周期created总是先执行的，父组件的生命周期mounted总是最后一个执行的
> 2.  平级各子组件的生命周期created是接下来执行的，然后是mounted

这里我引发了一个思考？  
**”调换下组件的位置看看执行结果会是什么样子的？“**  
看好了，我调换了两个平级子组件的位置：

**看看结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]  
**结论**

> 平级子组件的同一生命周期执行顺序取决于子组件挂载在父组件中的位置！

## 探索2：生命周期在嵌套型组件中的执行顺序 ##

嵌套型（就是俄罗斯套娃啦！）  
上代码：

//这是第一层父组件（App.vue）
    <template>
      <div>
        <h2>最大父组件（App.vue）</h2>
        <CompOne></CompOne>
      </div>
    </template>
    <script>
      import CompOne from "./views/CompOne"
      export default { 
        components:{ 
          CompOne
        },
        mounted() { 
          console.log("App —— mounted")
        },
        created() { 
          console.log("App —— created")
        },
      }
    </script>
    
    
    //这是第二层父组件（CompOne.vue）
    <template>
        <div>
            <h2>子组件1</h2>
            <CompTwo></CompTwo>
        </div>
    </template>
    <script>
        import CompTwo from "./CompTwo"
        export default { 
            components:{  CompTwo },
            mounted() { 
                console.log("子组件1 —— mounted")
            },
            created() { 
                console.log("子组件1 —— created")
            },
        }
    </script>
    
    //这是第三层组件，也是最内的一层（CompTwo.vue）
    <template>
        <div>
            <h2>子组件2</h2>
        </div>
    </template>
    <script>
        export default { 
            mounted() { 
                console.log("子组件2 —— mounted")
            },
            created() { 
                console.log("子组件2 —— created")
            },
        }
    </script>

**来吧，看看结果，迫不及待~**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]  
**结论：**  
不论子组件嵌套多少层，总是最外层（最大的父组件：App.vue）的生命周期created先执行，mounted最后执行，接下来便是向内一层（CompOne.vue）的生命周期created执行，接下来就是再向内一层（也就是第三层）的生命周期created执行，其次第三层的mounted执行，然后就是第二层的mounted了。  
**说的一大堆，给你看个输出图你就懂了：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 3]  
**总结**  
是的，created生命周期又外到内一层层先执行，而mounted生命周期则由内到外接着一层层执行！

## 探索3：路由懒加载中的平级子组件的生命周期执行顺序 ##

首先定义好App.vue文件：

<template>
      <div>
        <router-view></router-view>
      </div>
    </template>
    <script>
      export default {
        mounted() {
          console.log("App —— mounted")
        },
        created() {
          console.log("App —— created")
        },
      }
    </script>

父组件需要重新定义喽：

//CompMost.vue
    <template>
        <div>
            <h2>最大父组件</h2>
            <CompOne></CompOne>
            <CompTwo></CompTwo>
        </div>
    </template>
    <script>
        import CompOne from "./CompOne"
        import CompTwo from "./CompTwo"
        export default { 
            components: {  CompOne, CompTwo },
            mounted() { 
                console.log("Most —— mounted")
            },
            created() { 
                console.log("Most —— created")
            },
        }
    </script>

两个子组件依旧没有变动：

//CompOne组件
    <template>
        <div>
            <h2>子组件1</h2>
        </div>
    </template>
    <script>
        export default { 
            mounted() { 
                console.log("子组件1 —— mounted")
            },
            created() { 
                console.log("子组件1 —— created")
            },
        }
    </script>
    
    //CompTwo组件
    <template>
        <div>
            <h2>子组件2</h2>
        </div>
    </template>
    <script>
        export default { 
            mounted() { 
                console.log("子组件2 —— mounted")
            },
            created() { 
                console.log("子组件2 —— created")
            },
        }
    </script>

**router.js文件我就不写了，用的懒加载，来看看结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 4]

> 结论：  
> 当采用路由懒加载的方式时候，App.vue中的生命周期created和mounted先执行，其余的跟之前一样

防止你模糊，附赠非懒加载的平级组件的生命周期执行顺序：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 5]

## 探索4：路由懒加载条件下嵌套型子组件的生命周期执行顺序 ##

**代码重复性太高 直接看结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 6]

> 结论：  
> 依旧App.vue文件中的生命周期created和mounted先执行，其余的依旧。

**附赠非路由懒加载条件下嵌套型组建的生命周期执行顺序结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 7]  
是的，跟探索2结论一样。

> 最终结论：  
> 懒加载条件下，App.vue的生命周期会先执行（created和mounted），不论嵌套型还是平级的子组件。

最后，感谢热心同学，欢迎探讨~

版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。  
作者: 煮雨、  
原文链接：https://juejin.im/post/6939102974278893575

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70]: /images/20221022/f30fcc3d092148f5ade41e378fbd96da.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 1]: /images/20221022/9de5cbc4e06b456abcbad7128ee94e7f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 2]: /images/20221022/3da806ef2efa4fe6b86855e6d78de61e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 3]: /images/20221022/1057177edf1e4406bd71f97b0496a61c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 4]: /images/20221022/4d560456d9724b58833ba81fbed8482f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 5]: /images/20221022/cb024cf2cf644a1892a48bbc9e6fdafb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 6]: /images/20221022/d2159029112e4f7d8c001a057d4d3559.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Mjc5NTc0_size_16_color_FFFFFF_t_70 7]: /images/20221022/78bb8ee2553b491482e67ffa3c076789.png