Vue의 라이프사이클과 인스턴스

이글에서는 Vue 라이프사이클 이해하기의 내용을 일부 인용하고 있습니다

Vue에서는 인스턴스나 컴포넌트가 생성될때 몇 단계의 과정을 거치게 되는데 이를 라이프사이클(LIfecycle)이라고 부른다. 라이프사이클이란 Vue 인스턴스가 생성됨으로부터 화면상에 나타나고 사라지기까지의 과정을 일컫는 용어이며 이번 글에서는 이 라이프사이클에 대해서 알아보고자 한다.

Vue의 라이프사이클을 그림으로 표현한 모습이다

위 그림은 공식 문서에서 제공하고 있는 Vue 라이프사이클 다이어그램이다. 인스턴스의 과정을 축약하자면

 

1. 생성(create)
2. DOM에 부착(mounted)
3. 업데이트(update)
4. 소멸(destroy)

의 과정을 거친다. Vue는 각각의 과정에서 사용할 수 있는 API인 훅(Hook)을 제공하며 개발자는 이러한 훅들을 이용해서 Vue 프로젝트를 제어하고 데이터를 가공하고 화면을 구성해 나갈 수 있게 된다. Vue에서 제공하는 훅은 여러 종류가 있지만 일반적으로 자주 사용되는 훅으로는 created, mounted, updated, destroyed가 있다.

created

created훅은 가장 먼저 실행되는 훅으로 data를 반응형으로 추적할 수 있으며 computed, methods, watch등에 접근할 수 있게 된다. 그러나 아직 DOM에 추가되지는 않은 상태이다. 이처럼 data에 직접적으로 접근이 가능하기 때문에 페이지 로딩 초기에 API에서 받아온 값들이나 Vuex, Cookie등의 값으로 data를 세팅해야 할때 사용하는것이 적절하다.

mounted

일반적으로 가장 많이 사용하는 훅인 mounted훅으로 가상 DOM이 실제 DOM에 부착된 후에 호출되므로 this.$el을 비롯한 data, computed, methods, watch등의 모든 요소에 접근이 가능하다.

updated

가상 DOM이 렌더링되고 실제 DOM까지 변경된 후에 호출되는 훅이다. 변경된 값에 접근하는데 용이하며 mounted와는 다르게 data를 변경할 경우 무한 루프가 발생하기 때문에 직접 data에 접근해서는 안된다.

destroy

모든 작업이 종료되고 인스턴스가 해체된 후에 호출되는 훅으로 해체가 끝난 후이기 때문에 인스턴스의 속성에 접근할 수 없다.