vue父子组件生命周期执行顺序

之前写了vue的生命周期，本以为明白了vue实例在创建到显示在页面上以及销毁等一系列过程，以及各个生命周期的特点。然而今天被问到父子组件生命周期执行顺序的时候一头雾水，根本不知道怎么回事。然后写了一段demo验证一下大佬们说的顺序。

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <login></login>

  </div>

  <script>

    var login = {

      template: '<h1>{{childMsg}}}</h1>',

      data(){

        return {

          childMsg:'child'

        }

      },

      beforeCreate: function () {

        debugger;

        console.log("子组件的beforeCreate")

      },

      created: function () {

        debugger

        console.log("子组件的created")

      },

      beforeMount: function () {

        debugger

        console.log("子组件的beforeMount")

      },

      mounted: function () {

        debugger

        console.log("子组件的mounted")

      }

    }

    var vm = new Vue({

      el: '#app',

      data: {

        fatherMsg: "father"

      },

      methods: {},

      components: {

        login

      },

      beforeCreate: function () {

        debugger

        console.log("父组件的beforeCreate")

      },

      created: function () {

        debugger

        console.log("父组件的created")

      },

      beforeMount: function () {

        debugger

        console.log("父组件的beforeMount")

      },

      mounted: function () {

        debugger

        console.log("父组件的mounted")

      },

    });

  </script>

</body>

</html>