Vue 라이프 사이클

라이프 사이클(생명 주기)

 

• Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계

 

 

라이프 사이클 훅

 

• 각 라이프 사이클마다 개발자가 추가한 커스텀 로직(실행되는 함수들)

 

메서드	시점
beforeCreate	인스턴스가 생성되고, 리액티브 초기화가 일어나기 전
created	인스턴스가 생성되고, 리액티브 초기화가 일어난 후
beforeMount	인스턴스가 마운트되기 전
mounted	인스턴스가 마운트된 후
beforeUpdate	데이터가 변경되어 DOM에 적용되기 전
updated	데이터가 변경되어 DOM에 적용된 후
beforeDestroy	Vue 인스턴스가 제거되기 전
destroyed	Vue 인스턴스가 제거된 후
errorCaptured	임의의 자식 컴포넌트에서 오류가 발생했을 때

 

 

 

 

 

자주 사용되는 created와 mounted의 차이

 

created

• 인스턴스가 생성되고, 리액티브 데이터가 초기화된 직후에 호출됨
• 이 라이프 사이클 훅이 호출될 때는 아직 DOM이 구축되지 않은 상태임
• 따라서 인스턴스 자신을 나타내는 this에는 접근할 수 있지만, $el과 getElementById() 등을 사용한 DOM 접근은 불가함

 

 

mounted

 

• 인스턴스의 상태를 사용해서 DOM을 만든 직후에 호출됨
• 따라서 인스턴스 내부 템플릿의 $el과 getElementById()를 사용할 수 있음
• 다만 모든 자식 컴포넌트가 마운트 되었다는 것은 보증하지 않음

 

 

 

 

 

 

vue2 기준

 

 

 

 

 

 

 

참고: 고양이도 할 수 있는 Vue.js, https://joshua1988.github.io/vue-camp/vue/life-cycle.html