Vue.js Lifecycle Hook 정리

(해당 문서는 Vue.js 2 기준입니다.)

 

LifeCycle이란?

Vue.js 인스턴스가 생성되고 파괴될때까지의 흐름을 lifecycle(생명주기)이라고 합니다. Vue.js에서는 lifecycle 각 단계마다 hook을 제공하는데 해당 hook을 통해 그 단계에서 실행하고자 하는 작업을 할 수 있습니다. 예를 들어 페이지 진입시 해당 페이지에서 필요한 데이터를 api 호출을 통해 가져와야 한다면 created hook을 통해 할 수 있습니다. 다음으로 몇가지 lifecycle hook을 설명드리겠습니다.

created

인스턴스가 생성되고 초기화되자마자 실행됩니다. DOM 요소가 인스턴스와 연결된 상태가 아니기 때문에 $el 프로퍼티와 DOM API 사용해서 DOM 요소를 반환받을 수 없습니다. 데이터나 메서드에는 접근이 가능합니다. 데이터 관련 처리를 시작하거나, setInterval, setTimeout 등의 타이머 처리를 시점으로 사용됩니다. 

mounted

가장 많이 사용되는 hook입니다. 인스턴스가 마운트가 된 후 실행됩니다. DOM 조작 및 이벤트 리스너 등록할 수 있습니다. 전체 view가 렌더된 후 무언가를 하고 싶다면 mounted안에서 vm.$nextTick 함수를 사용하면 됩니다.

updated

반응형 데이터가 변경되어서 DOM이 업데이트된 이후 실행됩니다. 

beforeDestroy

인스턴스가 제거되기 전에 실행됩니다. DOM 요소에 등록한 이벤트 리스너나 타이머 등을 뒷정리하는 용도로 사용합니다.

destroyed

인스턴스가 완전히 제거된 후 실행됩니다.

activated

keep-alive 컴포넌트가 활성화되었을 때 실행됩니다.

deactivated

keep-alive 컴포넌트가 비활성화되었을 때 실행됩니다.

 

 

이 외에도 beforeCreate, beforeMount, beforeUpdate hook이 있지만 잘 사용되지 않습니다.(저만 그런 걸수도 있습니다.)

 

created, mounted hook은 부모-자식 관계에서 hook의 호출 순서가 반대입니다. created의 경우 부모 -> 자식 순서로 호출되지만, mounted의 경우 자식 -> 부모 순으로 호출됩니다.

 

 

참고 문서

https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram