[Vue] Vue의 LifeCycle 알아보기

Vue의 생명주기에는 4가지가 있다.

 

1. Creation(생성) 단계

2. Mounting(장착) 단계

3. Updation(수정) 단계

4. Destrucion(소멸) 단계

https://vuejs.org/guide/essentials/lifecycle.html

Lifecycle Hooks | Vue.js

 

1. Creation(생성) 단계

 - beforeCreate() : 라이프사이클 중 가장 맨 처음 실행되며, 컴포넌트가 DOM에 추가되기 전이게 때문에 DOM에 접근하게되면 에러 발생

 

 - created():  data() 변수와 events 메서드가 활성화 되어 접근할 수 있음

 

이 단계에서는 템플릿과 가상 DOM에는 접근할 수 없다.

 

2. Mounting(장착) 단계

 - beforeMount():  <template> 태그가 실행된 후 실행된다. 즉 html 태그를 등록한다. 템플릿과 렌더 함수들이 컴파일 된 후 첫 렌더링이 일어나기 직전에 실행된다. 초기 렌더링 직전에 DOM을 변경하고자 한다면 이 생명주기를 활용하면 된다. 컴포넌트 초기에 설정해야 할 데이터들은 created 단계에서 해야한다.

 

 - mounted(): 템플릿과 렌더링 된 DOM에 접근할 수 있는 단계

 

3. Updation(수정) 단계

 - beforeUpdate(): 컴포넌트의 데이터가 변하여 업데이트가 시작될 때 실행된다. 즉 데이터가 변경되면 가상 돔 화면을 다시 그리기 전에 호출 된다. DOM이 재렌더링 되고 패치되기 직전에 실행되며 재렌더링 전의 새상태의 데이터를 얻을 수 있다.

여기서 값을 변경해도 재렌더링 되지 않는다.

 

 - update(): 컴포넌트의 데이터가 변하여 재렌더링이 일어난 후에 실행된다. DOM이 업데이트 완료된 상태이며 연산과 기능을 할 수 있다.

 

4. Destrucion(소멸) 단계

 - beforeDestroy(): 소멸(뷰 컴포넌트 제거)되기 직전에 호출 된다. 컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있다.

 

 - destroyed(): 소멸(뷰 컴포넌트 제거)된 후에 호출 된다. Vue의 모든 디렉티브(v-)가 바인딩 해제되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 컴포넌트도 삭제됩니다.