[Vue] 부모 자식 간에 created, mounted 순서

안녕하세요 Vue의 라이프 사이클중 created와 mounted를 알아 보려고합니다.  보통  created와 mounted를 가장 많이 사용하지만 부모자식간에 호출 순서를 잘 모르는 경우가 많습니다. 때문에 Data를 핸들링 할때 에러가 많이 발생하는데 오늘 기회에 동작 순서를 정확하게 파악하여 올바르게 Data를 핸들링 하면 좋겠습니다

 

 

 

created란?

 

created는 렌더링은 안되었지만 Vue 인스턴스가 생성 되면서 동작하는 Hook이라고 보시면됩니다. virtual dom은  사용할 수 없지만 Data에 접근 및 초기화 하거나 이벤트를 처리하는데 자주 이용됩니다. 

 

 

 

 

그렇다면 하나의 부모 Component에 여라 자식 components가 존재 할 경우 호출 순서는 어떻게 될까요? 

 

 

 

 

 

부모 > 자식 순으로 동작 합니다.

mounted

mounted는 Vue 인스턴스가 Dom에 mounted될때 동작하는 Hook이라고 보시면 됩니다. 때문에 주로 Dom에 접근하여 조작이 필요하거나 watch를 통해 부모의 데이터 변형을 감지하고자 할 때 많이 사용합니다. 

 

그렇다면 동일 하게 부모 자식간에 호출 순서는 어떻게 될까요??

 

 

 

 

 

 

 

 

자식 > 부모 순으로 동작 합니다.

 

 

 

 

 

 

created와 mounted의 호출 순서는 차아기 존재합니다. 그렇다면 아래의 예제로 통해 쉽게 알아 보겠습니다.

 

 

 

 

 

 

Parent.vue

<template>
  <div id="app">
    here is Parent
    <child></child>
    <ChildSub></ChildSub>
  </div>
</template>

<script>
  import Child from "./components/extend/Child"
  import ChildSub from "./components/extend/ChildSecond"
  export default {
    name: 'App',
    components: {ChildSub,Child},
    created() {
      console.log("[parent created]")
    },
    mounted() {
      console.log("[parent mounted]")
    }
  }
</script>

 

 

 

 

 

Child.vue

<template>
    <div>
        here is Child
    </div>
</template>

<script>
    export default {
        name: "Child",
        created(){
            console.log("[Child created]")
        },
        mounted(){
            console.log("[Child mounted]")
        }
    }
</script>

 

 

ChildSecond.vue

<template>
    <div>
        here is ChildSecond
        <ChildChild></ChildChild>
    </div>
</template>

<script>
    import ChildChild from "./ChildChild"
    export default {
        name: "ChildSecond",
        components: {ChildChild},
        created(){
            console.log("[ChildSecond created]")
        },
        mounted(){
            console.log("[ChildSecond mounted]")
        }
    }

 

 

ChildChild.vue

<template>
    <div>
        here is ChildChild
    </div>
</template>

<script>
    export default {
        name: "ChildChild",
        created(){
            console.log("[ChildChild created]")
        },
        mounted(){
            console.log("[ChildChild mounted]")
        }
    }
</script>

 

 

 

 

 

 

 

 

 

Component 관계도 

 , 

 

 

 

 

각 Component의 관계는 위의 그림과 같습니다. 그렇다면 호출 순서는 어떻게 될까요?

 

 

 

 

 

보시는 봐와 같이 created는 부모 > 자식순으로 호출되고  mounted는 자식 > 부모 순으로 호출되는것을 확인 할 수가 있습니다.  부모 자식간에 라이프 사이클을  정확하게 알지 못하고 사용하는 경우가 많은데 이번 기회에 정확하게 알고 사용하여 효율적으로 코드를 짤 수 있길 바라겠습니다.