Vue Life Cycle 간단정리

Vue Life Cycle

 

라이프 사이클은 크게 나누면 생성, 부착, 갱신, 소멸의 4단계로 이루어짐

 

life cycle 속성

1. beforeCreate

Vue Instance가 생성되고 각 정보의 설정 전에 호출 DOM과 같은 화면요소에 접근 불가

 

2. Created

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

Instance가 화면에 부착하기 전이기 때문에 template 속성에 정의된 DOM요소는 접근 불가.

서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다(게시판 글목록 페이지 접근시 글정보)

 

3.beforeMount

마운트가 시작되기 전에 호출

 

4.mounted

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

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

 

5.beforeUpdate

데이터가 변경될 때 virtual DOM이 랜더링, 패치 되기 전에 호출

 

6.updated

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

데이터 변경 후 화면 요소 제어와 관련된 로직을 추가

 

7.beforeDestroy

Vue Instance가 제거되기 전에 호출

 

8.destroyed

Vue Instance가 제거된 후에 호출