[VUE] vue.js 라이프 사이클

VUE 와 친해지기..! 😎

 

---

 

Vue 인스턴스나 컴포넌트가 만들어질 때 몇 단계의 과정을 거치게 되는데, 이를 라이프사이클(life cycle)이라 한다.

즉 Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 말한다.

 

Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거친다.

 

Vue는 각각의 단계에서 훅(Hook)을 할 수 있도록 API를 제공한다. 

 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed  가 있다.

 

 

---

 

자세히 😏😎😉 알아보자

 

 

beforeCreate

- Vue 인스턴스가 초기화 된 직후에 발생된다.

- 컴포넌트가 DOM에 추가되기도 전이어서 this.$el 에 접근할 수 없다.

- data, event, watcher에도 접근하기 전이어서 data, methods에 접근할 수 없다.

 

 

created

- data를 반응형으로 추적할 수 있다.

- computed, methods, watch 등에 접근할 수 있다.

- 😡 BUT! 아직까지 DOM에는 추가되지 않는다.

- 😉 data에 직접 접근이 가능하기 때문에, 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절하다.

 

 

beforeMount

- DOM에 부착되기 직전에 호출되는 훅이다.

- 이 전단계에서 템플릿이 있는지 없는지 확인할 수 템플릿을 렌더링한 상태이므로, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태이다.

 

 

mounted

- 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행된다.

- this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근 가능하다.

- 부모 컴포넌트의 mounted 훅은 자식 컴포넌트의 mounted 훅 이후에 발생한다. (자식 -> 부모)

- 하지만 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼, 부모의 mounted 훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하진 않는다.

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

 

 

beforeUpdate

- 컴포넌트에서 사용되는 data의 값이 변해서, DOM에도 그 변화를 적용시켜야 할 때 사용한다.

- 변할 값을 이용해 가상 DOM을 렌더링하기 전이지만, 이 값을 이용해 작업할 수 있다.

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

 

 

updated

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

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

- 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면 쓰자.

- 😡 BUT! data를 변경하는 것은 무한 루프를 일으킬 수 있으므로 데이터를 직접 바꾸면 안된다. 

 

 

beforeDestroy

- 해당 인스턴스다 해체되기 직전에 호출된다.

- 아직 해체되기 전이므로, 인스턴스는 완전하게 작동하기 때문에 모든 속성에 접근이 가능하다.

- 이벤트 리스터를 해제하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리한다.

 

 

destroyed

- 인스턴스가 해체되고 난 직후에 호출된다.

- 해체가 끝난 이후기 때문에, 인스턴스의 속성에 접근할 수 없다.

- 하위 Vue 인스턴스 역시 삭제된다.

 

 

 

---

 

요 😏😎😉 약

 

 

 

created : 가상 DOM이 실제 DOM에 추가되진 않았지만 data에 직접 접근이 가능하다.

 

mounted : 가상 DOM이 실제 DOM에 부착되고 난 이후이다. 모든 요소에 접근 가능하다.

 

updated : 실제 DOM이 변경되고 변경된 data가 실제 DOM에 적용된 상태이다.

 

destroyed : 인스턴스가 해체된 이후이다.

 

 

 

---

 

 

뷰 라이프사이클 😏😎😉 한 눈에 보기

 

 

 

 

 

 

 

 

 

 

 

 

 

---

 

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