Vue 라이프 사이클

Vue도 일종의 인스턴스이기 때문에 Lifecycle(생명주기)를 갖는다.

Vue의 인스턴스가 생성되고 사라지기까지 사용자가

그 과정의 단계에서 로직을 수행할 수 있는 Life Cycle Hook을 제공한다.

 

Hook의 종류는 다음과 같다.

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

 

 

(이해하기전 참고 : routes는 경로와 컴포넌트으로 이뤄진 컬렉션이다. 실제 이 맵을 보고 라우터가 경로에 따라 그에 맞는 컴포넌트를 렌더링한다.)

 

1. beforeCreate

- vue 인스턴스가 생성된 직후 호출되는 hook

data, methods가 정의되어 있지 않고, DOM과 같은 화면요소에도 접근할 수 없음.

(컴포넌트가 dom에 추가되기도 전이다.)

컴포넌트란?

https://kr.vuejs.org/v2/guide/components.html

컴포넌트 — Vue.js

 

 

 

2. created

- data와 methods, computed, watch 등이 정의됨.

그러나 돔요소에 접근할 수는 없다. 

data에 외부에서 받아온 값들을 세팅하거나 이벤트 리스너들을 선언해야 할 경우

이 단계가 적절

 

3. beforeMount

- template에서 마크업 속성을 render()함수로 변환한 후 el속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 hook. 

가상 DOM이 생성되었으나 실제 DOM에 부착되지 않은 상태.

렌더링 되고 DOM을 변경해야 하면 mounted를 사용하면 되므로 거의 사용하지 않는 hook

 

render() 함수란?

https://kr.vuejs.org/v2/guide/render-function.html

Render Functions & JSX — Vue.js

 

4. mounted

- 가장 많이 사용하는 hook

el 속성에서 지정한 요소에 인스턴스가 부착되고 나면 호출되는 hook.

화면요소에 접근할 수 있어 화면요소를 제어하는 로직을 수행하기 좋다.

다만 mounted는 모든 자식 컴포넌트가 마운트 됨을 보장하지 않는다.

vm.$nextTick을 사용하면 모든 화면이 렌더링된 후 실행한다.

 

 

 

 

created는 부모->자식순으로 호출되지만 mounted는 자식->부모순으로 호출된다.

즉, 자식컴포넌트의 DOM에 모두 부착된 후에 부모컴포넌트의 mounted가 실행.

 

 

 

5. beforeUpdate

- el속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후,

인스턴스 속성들이 화면에 치환되고 이 치환된 값들을 $watch 속성으로 감시한다.

이 관찰하고 있는 데이터들이 변경되면 화면에 다시 렌더링 해야하는데

그 직전에 호출되는 훅이 beforeUpdate 이다. 

이 훅에서 값들을 추가적으로 변화시키더라도 랜더링을 추가로 호출하지는 않는다.

 

 

 

6. updated

- 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후 호출되는 훅.

변경된 data가 DOM에도 적용된 상태이다. 

변경된 data들을 DOM을 이용해 접근하고 싶을때 적절.

 

다만 이때 이 훅에서 data를 직접 변경한다면 무한루프에 빠질 수도 있으므로 주의해야한다.

data가 변경되면 beforeUpdate가 호출되고 다시 updated가 호출되고 .......

따라서 업데이트된 값들로 다른 값들을 업데이트할 땐 beforeUpdate를 사용한다.

 

7. beforeDestroy

- 해당 인스턴스가 해체되기 직전에 호출되는 훅.

인스턴스가 아직 완전히 작동하기 때문에 인스턴스가 사라지기전에 해야할 일들을 여기서 처리하면 된다.

 

8. destroyed

- 인스턴스가 해체가 끝난 직후에 호출되는 훅.

인스턴스 속성에 접근 x. 하위 Vue 인스턴스 역시 삭제된다.

 

 

 

 

----------------

프로젝트를 진행하면서 부모 컴포넌트의 created에서 비동기 axios로 필요한 데이터를 불러오고

그 정보들을 vuex의 store에 저장하여 자식 컴포넌트의 mounted에서 store의 값들로

다른 axios를 호출하여 데이터를 가지고 오려고 했으나

 

store의 값이 undefined인 현상을 겪었는데

이유가 axios로 불러와서 store에 저장하는 시점보다 

자식컴포넌트의 mounted가 먼저 실행되는 경우였다.

 

따라서 해결방안을 생각해봤는데.

- 부모 컴포넌트에서 호출한 axios를 필요한 자식vue마다 매번 mounted 호출

- updated를 활용 (이 방법은 매우 좋지 않음)

- cookies를 활용

 

이 부분은 나중에 다시 정리하여 포스팅하겠습니다.