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

谈到一个模板的生命周期执行顺序我们每个人都可以谈的津津有味，但是父子组件的生命周期执行函数是怎样的呢？

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

父组件代码：

<template>
  <div>
      <mo-ban></mo-ban>
  </div>
</template>
<script>
import moBan from './moban'
export default {
    
    
  components: {
    
    
      moBan
  },
  data() {
    
    
    return {
    
    };
  },
  beforeCreate() {
    
    
    console.log("父组件---创建前");
  },
  created() {
    
    
    console.log("父组件---创建后");
  },
  beforeMount() {
    
    
    console.log("父组件---载入前");
  },
  mounted() {
    
    
    console.log("父组件---载入后");
  },
  beforeUpdate() {
    
    
    console.log("父组件---更新前");
  },
  updated() {
    
    
    console.log("父组件---更新后");
  },
  beforeDestroy() {
    
    
    console.log("父组件---删除前");
  },
  destroyed() {
    
    
    console.log("父组件---删除后");
  },
};
</script>
<style lang='less' scoped>
</style>

子组件代码:

<template>
  <div>
    {
    
    {
    
     name }}
  </div>
</template>
<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      name: "子组件",
    };
  },
  beforeCreate() {
    
    
    console.log("子组件---创建前");
  },
  created() {
    
    
    console.log("子组件---创建后");
  },
  beforeMount() {
    
    
    console.log("子组件---载入前");
  },
  mounted() {
    
    
    console.log("子组件---载入后");
  },
  beforeUpdate() {
    
    
    console.log("子组件---更新前");
  },
  updated() {
    
    
    console.log("子组件---更新后");
  },
  beforeDestroy() {
    
    
    console.log("子组件---删除前");
  },
  destroyed() {
    
    
      console.log("子组件---删除后");
  },
};
</script>
<style lang='less' scoped>
</style>

父组件先进行一个执行，完成生命周期的前三个阶段，然后就不在继续执行，继而去完成子组件的生命周期。最后父组件完成自己的mounted阶段。
destroy 钩子函数执行顺序是先子后父跟mounted过程一样。