[Vue.js] Vue.js LifeCycle 정리

Vue.js에는 LifeCycle이 존재한다.

* LifeCycle이란 컴포넌트가 생성되고 소멸되기까지의 단계를 뜻한다. 

 

 

 

1) beforeCreate

인스턴스가 초기화가 되고, 즉시 실행되는 것이 beforeCreate 단계다. data()나 computed와 같은 옵션들을 처리하기 전에 실행된다. 

이 단계에서 props에서 전달 받은 값을 사용하고 싶을 경우, Vue2는  created부터 props를 사용할 수 있고 Vue3에서는 beforeCreate에서 props 값을 사용할 수 있다. 

 

*Vue3에서 제공해주는 컴포지션api의 훅인 setup()은 beforeCreate() 이전에 호출된다.

 

2) created

해당 단계는 인스턴스가 처리되고, state와 관련된 옵션들인 computed나 methods가 정의된 후에 실행되는 단계다. 

*위의 computed, methods 등이 정의가 되었지만, 아직 마운팅은 시작되지 않았으므로 엘리먼트에 접근할 수 있는 $el 속성은 사용 못한다.

 

3) beforeMount

컴포넌트가 마운트되기전에 호출되는 단계

* 훅이 호출됐을 때, 컴포넌트는 반응형 상태를 setting하는데 까지 진행했지만, 아직 DOM 노드가 생성되지 않았다.

 

4) mounted

컴포넌트가 마운트 된 후에 실행되는 단계

* 동기적인 자식 컴포넌트들은 마운트 되었다. (하지만 비동기적인 컴포넌트나, 컴포넌트 안에 포함되어있는 Suspense는 포함되지 않는다. ) 

 

5) beforeUpdate

컴포넌트가 DOM tree에 업데이트 되기 전에 실행되는 단계

  

6) updated

state 변경에 따라 컴포넌트가 DOM 트리를 update한 이후의 단계 

 

7) beforeUnmount

컴포넌트가 unmount되기 전에 실행되는 단계

 

8) unmounted 

컴포넌트가 마운트 된 후에 실행되는 단계