Vue.js LifeCycle

1. Vue.js LifeCycle

 Vue 인스턴스나 컴포넌트가 생성되면 거치게 되는 과정이 있는데 이를 라이프 사이클(LifeCycle)이라고 합니다.

Vue LifeCycle

LifeCycle을 크게 나누면 Instance의 생성, 생성된 Instance를 화면에 부착, 화면에 부착된 Instance의 내용이 갱신, Instance가 제거되는 소멸의 4단계로 나뉜다. 이러한 LifeCycle의 속성에는 총 8가지로 나눠질 수 있지만 여기서는 

Created, Mounted, Updated, Destroyed 4가지만 다뤄보겠습니다.

 

Created

- Vue Instance가 생성된 후 데이터들의 설정이 완료된 후 호출

- 이단계는 컴포넌트가 돔에 추가되기 전이다. 즉, 화면에 나타나기 전상태이다.

- Instance가 화면에 추가되기 전이기 때문에 template 속성에 정의된 DOM요소는 접근 불가. (data에 직접 접근 가능)

 

Mounted

- 지정된 element에 Vue Instance 데이터가 마운트 된 후에 호출

- 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행 되므로 data, computed, methods 등 모든 요소 접근 가능 

- template속성에 정의한 화면 요소에 접근 할 수 있어 요소를 제어하는 로직 수행

 

Updated

-Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태

 

 

Destroyed

- 인스턴스가 제거된 후에 호출