Vue LifeCycle

1. Vue LifeCycle

Vue 인스턴스는 생성(create) -> DOM에 부착(mount) -> 업데이트(update) -> 사라짐(destroy) 과정을 거친다.

 

1) beforeCreate : Vue 인스턴스가 초기화된 직후 발생으로 DOM에 추가되기 전이라 this.$el에 접근할 수 없다. 또한, data, event, watcher에도 접근하기 전이라 data, methods에도 접근 불가능하다. 

 

2) created : data를 반응형으로 추적할 수 있게 되고, computed, methods, watch 등이 활성화 되어 접근이 가능하게 된다. 

 그러나 아직 DOM에는 추가되지 않은 상태이다. 

 - >data에 직접 접근이 가능해 data를 세팅해야하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절하다.

 

3) beforeMount와 mounted의 차이

 beforeMount는 이 단계 전에 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 이후이며, 가상 DOM이 생성되어 있으나 실제 DOM에는 부착되지 않은 상태

 mounted는 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후라서 this.$el을 비롯하여 data, computed, methods, watch등 모든 요소에 접근 가능하다.

 

4) 부모 컴포넌트 와 자식 컴포넌트의 관계에서 LifeCycle

부모 컴포넌트 created -> 자식 컴포넌트 created -> mounted -> 부모컴포넌트 mounted

부모 컴포넌트의 mounted훅은 자식 컴포넌트의 mounted훅 이후에 발생한다. 하지만 자식컴포넌트가 서버에서 비동기로 데이터를 받아올 때 모든 자식컴포넌트의 mounted가 부모의 mounted이전에 발생하는 것은 아니다. 

따라서 this.$nextTick을 이용한다면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있다.

 

5) beforeDestory

보통 interval 걸어놓고 계속 api 호출하다가 해당 페이지에서 나갈 때 interval clear사용 가능하다.

 

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html

Vue 라이프사이클 이해하기 - 재그지그의 개발 블로그