[Vue.js] Vue 인스턴스의 라이프 사이클

vue 라이프 사이클

크게 4단계로 구별됨

1. 인스턴스 생성

2. 생선된 인스턴스 화면에 부탁

3. 화면에 부착된 인스턴스 갱신

4. 인스턴스 소멸

라이프사이클 속성

"인스턴스의 상태에 따라 호출 할 수 있는 속성들을  라이프 사이클 속성이라고 한다"

beforCreate

- 인스턴스 생성되고 가장 먼저 실행되는 단계

- data 속성, method속성 아직 정의 되지않음

- DOM으로 접근 불가

create

- data속성, method속성 정의됨

- 화면에 부착되기 전이기 때문에  template속성을 DOM으로 접근 불가

- 서버에서 데이터를 요청하여 받아오는 로직을 수행하기 좋음

beforeMount

- template속성을 render()함수로 변환

- el속성에 지정한 DOM요소에 인스턴스를 부착하기전

- rander() 함수가 호출되기 직전의 로직을 추가하기에 적합

mounted

- el속성에서 지정한 DOM에 인스턴스가 부착되고 나면 호출되는 단계

- template에 정의한 속성에 접근가능

- 화며요소를 제어하는 로직을 수행하기 좋은 단계

beforUpdpate

- 인스턴스에 정의한 속성들이 화면에 치환되는 단계

- $watch속성으로 변경된 사항을 감시

- 변경 예정 데이터값과 관련된 로직을 미리 넣을 수 있음

updated

- 데이터가 변경되고 나서 다시 화면을 그리고나면 실행되는 단계

- 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계

- 이 단계에서 데이터값을 변경하면 무한루프에 빠질 수 있음으로 주의

- 이 단계에서 데이터 값을 변경하려면 computed, watch와 같은 속성을 사용해야함

- 데이터값을 갱신하는 로직은 가급적이면 beforUpdate에 추가해야함

beforeDestory

- vue 인스턴스 파괴되기 직전의 단계

- vue 인스턴스의 데이터를 삭제하기 좋은 단계

destoyed

- vue 인스턴스가 파괴되고 호출되는 단계