親子コンポーネントのライフサイクルの実行順序

テンプレートのライフサイクル実行順序に関しては、私たち全員がgustoと話すことができますが、親子コンポーネントのライフサイクル実行機能についてはどうでしょうか。

親コンポーネントと子コンポーネントのライフサイクル実行順序：

親コンポーネントコード：

<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>

親コンポーネントは最初に実行を実行し、ライフサイクルの最初の3つのステージを完了してから、実行を継続せず、次に子コンポーネントのライフサイクルを完了します。最後に、親コンポーネントはマウントされたステージを完了します。
フックの破棄機能の実行順序は、マウントされたプロセスと同じです。