[Vue.js] Life cycle -인스턴스 생명주기

 

생명주기란?

인스턴스의 상태에 따라서 호출 할 수 있는 속성들.

 

라이프 사이클 훅(Life cycle hook)이란?

라이프 사이클마다 개발자가 추가한 커스텀 로직.

 

 

 

 

Creation

컴포넌트 초기화 단계

 

Creation 단계에서 실행되는 훅(hook)들이 라이프 사이클 중 가장 먼저 실행된다.

컴포넌트가 DOM에 추가되기 전이며 서버 렌더링에서도 지원되는 훅이다.

 

클라이언트, 서버 모두에서 처리해야 할 작업이 있다면 해당 단계에 적용.

 

 

● beforeCreate

 

가장 먼저 실행되는 훅

데이터나 이벤트가 세팅되지 않은 시점이므로 화면 요소 접근 불가능.

 

● created

 

데이터, 이벤트가 활성화되어 접근이 가능함

템플릿과 virtual DOM은 마운트 및 렌더링 되지 않은 상태.

 

 

Mounting

DOM 삽입 단계

 

초기 렌더링 직전 컴포넌트에 직접 접근이 가능하다.

컴포넌트 초기에 세팅되어야 할 데이터들은 created에서 사용하는 것이 낫다.

 

 

● beforeMount

 

템플릿이나 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행됨.

많이 사용하지 않음.

 

● mounted

 

컴포넌트, 템플릿, 렌더링된 DOM에 접근이 가능함.

모든 화면이 렌더링 된 후에 실행.

 

※ 주의사항

부모와 자식 관계의 컴포넌트에서 순서대로 mounted가 발생하지 않는다.

부모는 자식의 mounted hook이 끝날 때 까지 기다림.

 

 

Updating

렌더링 단계

 

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 다시 렌더링되면 실행된다.

디버깅을 위해 컴포넌트가 재 렌더링되는 시점을 알고 싶을 때 사용한다.

 

 

● beforeUpdate

 

컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행.

- DOM이 재 렌더링되고 패치되기 직전 상태

 

데이터 값을 갱신하는 작업 처리.

- updated에서 실행 할 경우 무한루프에 빠질 수 있음.

 

● updated

 

컴포넌트의 데이터가 변하여 다시 렌더링 된 이후에 실행.

업데이트가 완료된 상태이므로, DOM 종속적인 연산이 가능.

데이터가 변경되고 화면 요소를 제어하는 작업을 구현 할 때 사용.

 

 

 

Destruction

해체 단계

 

● beforeDestory

 

해체되기 직전에 호출.

Vue 인스턴스의 데이터 삭제 혹은 삭제 직전 해야하는 작업들을 구현.

이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 할 때 유용함.

 

● destroyed

 

해체된 이후에 호출.

Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거됨.

 

 

추가로 사용하는 속성들

 

● computed - 선언형

 

템플릿에 데이터를 바인딩 할 수 있음.

 

- data.now()와 같이 의존할 곳이 없는 computed 속성은 업데이트 불가.

호출 시 마다 업데이트 하고 싶다면 methods 이용.

 

● watch - 명령형

 

데이터가 변경 되었을 때 호출되는 콜백함수를 정의

감시할 데이터를 지정하고, 데이터가 바뀌면 함수를 실행하라는 방식.

 

watch는 API를 호출하고, 결과에 대한 응답을 받기 전 중간 상태를 설정 할 수 있으나 computed는 불가능.

대부분의 경우 선언형 방식인 computed 사용이 좋으나, 비동기식 계산 혹은 시간이 많이 소요되는 계산을 할 때는 watch를 사용하는 것이 좋다.