Vue.js에서 라이프사이클 훅을 배우게 되고 사용하다보면 의문이 생길 때가 있다.

일반적으로 배우는 공식문서의 라이플사이클 훅은 단일 컴포넌트에 대한 설명이고,
부모 컴포넌트와 자식 컴포넌트 사이에서 렌더링 순서에 대해서는 설명되어 있지않다.

실제 다중컴포넌트에서 created와 mounted 사용시 작동 순서는 아래와 같다.

created

인스턴스가 모든 상태 관련 옵션 처리를 완료한 후 호출됩니다.


반응형 데이터, 계산된 속성, 메서드 및 감시자가 설정된 후, 이 훅이 호출되면 됩니다. 그러나 마운팅 단계가 시작되지 않았으므로, $el 속성을 아직 사용할 수 없습니다.

mounted

컴포넌트가 마운트된 후 호출됩니다.


컴포넌트가 마운트된 것으로 간주되는 경우 :
동기적으로 선언된 모든 자식 컴포넌트가 마운트됨
자체 DOM 트리가 생성되어 상위 컨테이너에 삽입된 경우
앱의 루트 컨테이너가 문서 내에 있고, 컴포넌트의 DOM 트리도 문서 내 있는 경우에만 보장됨

실제 컴포넌트

1. 부모컴포넌트가 호출되는 순간 부모의 created가 호출되고, created가 완료되며 렌더링이 시작된다.
   
   
2. 렌더링이 시작되면 자식컴포넌트가 호출되며, 자식컴포넌트의 created가 호출된다.
   
   
3. 자식컴포넌트의 created가 종료된 후에 자식컴포넌트의 렌더링이 완료되며, 자식컴포넌트의 mounted가 호출된다.
   
   
4. 자식컴포넌트의 mounted가 호출완료되고, 부모컴포넌트의 mounted가 호출된다.

정리

부모 created => 자식 created => 자식 mounted => 부모 mounted 순으로 작동