[Vue] Vue3 라이프사이클

라이프사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미한다.
이 과정에서 특정 시점에 특정 로직을 구현할 수 있도록 하는 것이 라이프사이클 훅.


그럼 Vue3의 라이프사이클 훅에 대해 알아보자.

beforeCreate

• 인스턴스가 생성되고 최초로 실행되는 단계
• data, method 등 속성이 아직 인스턴스에 정의되어 있지 않아 화면 요소에 접근할 수 없다.
• beforeCreate 호출 후 Options API에 대한 초기화가 진행된다.
  
  

created

• data, method 등 인스턴스 관련 옵션을 처리한 후에 호출되는 단계
• 아직 컴포넌트가 DOM에 추가되지 않아서 template 속성에 정의된 요소에 접근할 수 없다.
• data에 직접 접근이 가능해서 서버로부터 가져온 데이터로 로직을 실행할 수 있다.
  
  

beforeMount

• 컴포넌트가 마운팅 되기 전에 호출되는 단계 (DOM부착 직전)
• created 단계에서 템플릿 유무를 확인하고 랜더링한 상태로, 가상 DOM이 생성되어 있지만 실제 DOM에 부착하지는 않은 상태
  
  

mounted

• 컴포넌트가 마운트된 단계
• 컴포넌트의 랜더링 된 DOM 요소에 접근해야할 때 사용
  
  

beforeUpdate

• 데이터가 업데이트 되어 컴포넌트가 DOM 트리를 업데이트 하기 직전에 호출되는 단계
• 가상 DOM을 랜더링하기 전이지만 변경될 값을 이용해 작업할 수 있다.
  
  

updated

• 가상 DOM을 랜더링하고 실제 DOM이 변경된 이후 진행되는 단계
• DOM을 이용해 변경된 값에 접근할 수 있다.
  
  

beforeUnmount

• 컴포넌트가 unmount 되기 직전에 호출되는 단계
• 컴포넌트 제거 전에 정리 작업에 유용한 단계로, 아직 해제되기 전이기 때문에 인스턴스의 모든 속성에 접근 가능
  
  

unmounted

• 컴포넌트가 마운트 해제된 후에 호출되는 단계
• 인스턴스 속성에 접근할 수 없다.