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

创建阶段：

  父组件的beforeCreated => 父组件的Created => 父组件的beforeMount => 子组件的beforeCreated => 子组件的Created => 子组件的beforeMount => 子组件的mounted => 父组件的mounted

更新阶段:

  父组件的beforeUpdate =>子组件的beforeUpdate => 子组件的updated => 父组件的updated

销毁阶段：父组件销毁

  父组件的beforeDestroy => 子组件的beforeDestroy =>子组件的destroyed => 父组件的destroyed

销毁阶段：子组件销毁

子组件的beforeDestroy
子组件的destroyed

代码示例

<div id="app">
    <button @click="destroy">销毁</button>
    <p>{{fatherMsg}}</p>
    <child :message="fatherMsg" @fn="getChildMsg"></child>
  </div>

  <template id="child">
    <div>
      <button @click="destroy">子组件销毁</button>
      {{msg}}---{{message}}
    </div>
  </template>

  <script>
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        fatherMsg: 20
      },
      methods: {
        getChildMsg(value) {
          this.fatherMsg = value;
        },
        destroy() {
          this.$destroy();
        }
      },
      beforeCreate() {
        console.log("父组件的beforeCreated");
      },
      created() {
        console.log("父组件的Created");
      },
      beforeMount() {
        console.log("父组件的beforeMount");
      },
      mounted() {
        console.log("父组件的mounted");
      },
      beforeUpdate() {
        console.log("父组件的beforeUpdate");
      },
      updated() {
        console.log("父组件的updated");
      },
      beforeDestroy() {
        console.log("父组件的beforeDestroy");
      },
      destroyed() {
        console.log("父组件的destroyed");
      },
      components: {
        child: {
          template: '#child',
          data() {
            return {
              msg: 10,
            };
          },
          props: {
            "message": {
              type: Number
            }
          },
          watch: {
            msg(newValue) {
              this.$emit('fn', newValue);
            },
          },
          methods: {
            destroy() {
              this.$destroy();
            }
          },
          beforeCreate() {
            console.log("子组件的beforeCreated");
          },
          created() {
            console.log("子组件的Created");
          },
          beforeMount() {
            console.log("子组件的beforeMount");
          },
          mounted() {
            console.log("子组件的mounted");
          },
          beforeUpdate() {
            console.log("子组件的beforeUpdate");
          },
          updated() {
            console.log("子组件的updated");
          },
          beforeDestroy() {
            console.log("子组件的beforeDestroy");
          },
          destroyed() {
            console.log("子组件的destroyed");
          }
        }
      },
    });
  </script>
</body>