상위-하위 구성 요소 라이프 사이클 실행 순서

템플릿의 라이프 사이클 실행 순서와 관련하여 우리는 모두 즐겁게 이야기 할 수 있지만 부모-자식 구성 요소의 라이프 사이클 실행 기능은 어떻습니까?

상위 및 하위 구성 요소의 라이프 사이클 실행 순서 :

상위 구성 요소 코드 :

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

상위 구성 요소는 먼저 실행을 수행하고 라이프 사이클의 처음 세 단계를 완료 한 다음 실행을 계속하지 않고 하위 구성 요소의 라이프 사이클을 완료합니다. 마지막으로 상위 구성 요소가 마운트 된 단계를 완료합니다.
훅 파괴 기능의 실행 순서는 마운트 된 프로세스와 동일합니다.