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

最近面试遇到一个很有意思的问题：

“你知道Vue的同一生命周期在子组件先执行还是父组件先执行？”

可能了解Vue的执行机制的同学就已经知道答案了，不着急说答案，想请你慢慢看完。

我们来测试一下：

我们讲讲最重要的俩：created 和 mounted

我首先创建了两个子组件：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>

这时候我们来看看浏览器的输出结果：

结论：

• 不论子组件有多少，父组件的生命周期created总是先执行的，父组件的生命周期mounted总是最后一个执行的

• 平级各子组件的生命周期created是接下来执行的，然后是mounted

这里我引发了一个思考？

    ”调换下组件的位置看看执行结果会是什么样子的？“

看好了，我调换了两个平级子组件的位置：

<template>
  <div>
    123
    <CompTwo></CompTwo>
    <CompOne></CompOne>
  </div>
</template>

看看结果：

结论：

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

嵌套型（就是俄罗斯套娃啦！）

上代码：

//这是第一层父组件（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>

来吧，看看结果，迫不及待~

请仔细看看输出结果，然后再看结论，给大脑一些思维时间 ~~~

结论：

不论子组件嵌套多少层，总是最外层（最大的父组件：App.vue）的生命周期created先执行，mounted最后执行，接下来便是向内一层（CompOne.vue）的生命周期created执行，接下来就是再向内一层（也就是第三层）的生命周期created执行，其次第三层的mounted执行，然后就是第二层的mounted了。

说的一大堆，给你看个输出图你就懂了：

是的，created生命周期又外到内一层层先执行，而mounted生命周期则由内到外接着一层层执行！