Vue 라이프 사이클 중 created와 mounted를 알아보려고 한다.
부모 자식 간 호출 순서를 잘 알지 못할 경우 데이터 핸들링을 할 때 어려움을 느낄 수 있다.
이 순서를 정확하게 파악하여 더욱 효율적인 코드를 작성할 수 있도록 하자 🙏
created
인스턴스가 작성된 후에 동기적으로 호출됨
그러나 DOM에 추가되기 전이므로 template 속성에 정의된 DOM 요소는 접근 불가능
data에 접근이 가능하므로 data를 세팅하거나 이벤트 리스너를 선언하기 적합한 단계
렌더링은 되지 않았지만 Vue 인스턴스가 생성되면서 동작하는 Hook.
virtual DOM은 접근할 수 없지만 Data에 접근 및 초기화하거나 이벤트 처리하는데 자주 이용함.
mounted
DOM에 부착완료
$el, data, computed, methods, watch 등 모든 요소에 접근 가능
$nextTick을 사용하면 모든 화면이 렌더링 된 후 컴포넌트를 조작할 수 있음
Vue 인스턴스가 DOM에 mounted될 때 동작하는 Hook.
주로 DOM에 접근하여 조작이 필요하거나 watch를 통해 부모의 데이터 변형을 감지하고자 할 때 많이 사용함.
부모 자식 간 created, mounted 순서
created는 부모 > 자식 순으로 호출되고, mounted는 자식 > 부모 순으로 호출된다.
위의 그림과 같이 부모 컴포넌트의 created가 먼저 실행되고, 그 다음 자식 컴포넌트의 created가 실행된다. 그 이후, 자식 컴포넌트의 mounted가 먼저 실행된 이후에 부모 컴포넌트의 mounted가 실행되는 것을 확인할 수 있다.
