[ Vue.js ] Vue 라이프 사이클(lifecycle)

 

Vue 라이프 사이클(lifecycle)

---

-  인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계

-  각 단계에서 실행되는 함수들을 라이프사이클 훅이라고 한다.

-  크게 생성(create), DOM에 부착(mount), 업데이트(update), 소멸(distory) 4가지 과정을 거친다.

 

beforeCreate

---

• Vue 인스턴스가 초기화 된 직후에 발생
• 컴포넌트가 DOM에 추가되기 전이여서 this.$el 사용할 수 없음
• 데이터와 이벤트가 설정되기 전이여서 data, methods에 접근할 수 없음

 

 

created

---

• 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근 불가
• data, methods 등이 활성화되어 접근 가능
• 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅하거나, 이벤트 리스너를 선언할 시 created 단계에서 하는 것이 가장 적절함.

 

 

beforeMount

---

• DOM에 부착하기 직전에 호출되는 단계
• 템플릿 속성 내용을 rander()변환 된 상태(rander() 자바스크립트로 화면의 돔을 그리는 함수)
• render() 함수가 호출되기 직적의 로직을 추가하기 좋음

 

 

mounted

---

• 가상 DOM의 내용이 실제 DOM에 부착되고 난 후 실행
• 모든 요소에 접근 가능, 화면 요소를 제어하는 로직을 수행하기 좋은 단계
• 부모 컴포넌트의 mounted 훅은 자식 컴포넌트의 mounted 훅 이후에 발생
• 항상 모든 자식 컴포넌트가 마운트 된 상태를 보장하지 않기 때문에, 재렌더링이 끝났다는 것이 보장 된 상태에서 작업 하기 위해서는 this.$nextTick을 사용한다.

 

 

beforeUpdate

---

• 데이터가 변경되면 DOM이 재렌더링 되기 직전에 호출되는 단계
• 변경 된 값들을 가지고 있는 상태이기 때문에, 변경된 값으로 다른 값들을 업데이트 할 수 있음

 

 

updated

---

• 가상 DOM을 렌더링하고 실제 DOM이 변경된 이후에 호출되는 단계
• 변경된 값들을 DOM을 이용해 접근하고 싶을때 사용하기 적절함.
•  data 변경 시 무한 루프를 일으킬 수 있어, 데이터를 직접 바꾸기보다는 this.$nextTick을 이용해야 하거나 computed, watch와 같은 속성을 사용해야 한다.
• 데이터 값을 갱신하는 로직은 beforeUpdate에 추가, 변경 데이터의 화면 요소(돔)와 관련된 로직은 updated에 추가하는 것이 좋음

 

 

beforeDestroy

---

• 컴포넌트가 소멸되기 전에 호출되는 훅
• 소멸되기 전이므로, 컴포넌트는 작동가능하여 모든 속성에 접근 가능함.
• 이벤트 리스너를 해제하거나, 데이터를 삭제하는 등 컴포넌트가 소멸되기 전에 해야할 일들을 처리하기 적절함.

 

 

destroyed

---

• 컴포넌트가 소멸되고 난 직후에 호출되는 훅
• 컴포넌트의 모든 이벤트 리스너 바인딩등이 해제 되고, 하위 컴포넌트도 모두 제거됨.