Vue_7 생애주기 훅

생애주기 훅

---

 

• beforeCreate: 인스턴스 생성 전 (데이터, 이벤트 등 초기화 전)
• created: 인스턴스가 생성되고 데이터가 초기화된 후 (DOM에 연결되기 전)
• beforeMount: 인스턴스가 마운트되기 직전 (DOM이 아직 렌더링되지 않음)
• mounted: 인스턴스가 DOM에 마운트된 후 (DOM에 접근 가능)
• beforeUpdate: 반응형 데이터가 변경되어 DOM이 업데이트되기 직전
• updated: DOM이 업데이트된 직후
• beforeDestroy: 인스턴스가 파괴되기 직전 (이벤트 리스너, 타이머 정리)
• destroyed: 인스턴스가 완전히 파괴된 후

 

---

1. created 훅

인스턴스가 생성되고 데이터가 초기화된 시점에 실행됨

아직 DOM 요소가 인스턴스와 연결된 상태가 아님

 

그러므로 아직 인스턴스의 $el 프로퍼티와 DOM API의 getElemnetById, querySelectorAll을 사용해 DOM 요소를 반환받을 수 없는 상태임

 

이 훅은 Vuex를 적용하지 않은 소규모 애플리케이션에서 웹 API를 통해 데이터 관련 처리를 시작하거나 setInterval, setTimeout을 반복 실행해야 하는 타이머 처리를 시작하는 시작점으로 사용함

---

2. Mounted 훅

인스턴스와 DOM 요소가 연결된 시점에 실행됨.

인스턴스의 $el 프로퍼티나 querySelectorAll 같은 DOM API를 사용할 수 있는 시점이므로 DOM 조작 및 이벤트 리스너 등록은 이 훅을 사용하믄 댐 ㅇㅇ

---

3. beforeDestroy 훅

인스턴스가 폐기 되기 직전에 실행. mounted 훅에서 DOM 요소에 등록한 이벤트리스너나 타이머 등을 '뒷정리'하는 용도로 사용함. 

이 뒷정리를 제대로 하지 않으면 메모리 누수의 원인이 되므로 사용자 경험을 해칠 우려가 있음

---