setup
beforeCreate
인스턴스 초기화된 후 호출
- data()와 computed와 같은 옵션을 처리하기 전 호출되기 때문에 접근 불가
created
data, computed, method, watch 가 설정된 후 호출
- mounting 단계가 시작되지 않았으므로 '$el' 속성 사용 불가
- 아직 DOM에는 추가되지 않은 상태이므로 <template>과 가상 DOM에 접근 불가
- 보통, data 세팅 및 event listener 선언 사용
beforeMount
컴포넌트가 mount되기 직전, <template> 태그 컴파일 후 호출
- 템플릿을 렌더링 한 상태로, 가상 DOM이 생성되었으나 아직 실제 Dom 노드가 생성되지 않았음
- 초기 렌더링 직전에 DOM을 변경하고자 하는 경우 사용
mounted
컴포넌트가 mount트된 후 호출
* 가상 DOM이 실제 DOM에 부착되고 난 이후
- mount된 것
- 동기적으로 선언된 모든 자식 컴포넌트가 mount됨 (비동기 컴포넌트 or <Suspense> 트리 내부 컴포넌트는 포함하지 않음)
- 자체 DOM 트리가 생성되어 상위 컨테이너에 삽입된 경우, 앱의 루트 컨테이너가 문서 내에 있고, 컴포넌트의 DOM 트리도 문서 내 있는 경우
- 렌터링된 DOM에 접근해야하는 사이드 이펙트(비동기로 처리되어야 하는 것들. ex.외부 API 호출 등)를 실행하거나, 서버에서 렌더링된 앱의 DOM 관련 코드를 클라이언트에서만 조작하도록 제한하는데 사용
beforeUpdate
data 값이 변하여 DOM 트리 업데이트 직전 호출
- 가상 DOM을 렌더링하기 전
- DOM 업데이트 전, DOM 상태에 접근하는데 사용
updated
가상 DOM을 렌더링하고 실제 DOM 트리 업데이트 후 호출
(자식 컴포넌트의 updated 이후 호출)
- 이 훅에서 data를 변경할 경우 무한 루프 가능성이 있으므로 주의
beforeUnmount
마운트 해제(삭제)되기 직전 호출
unmounted
컴포넌트가 마운트 해제된 후 호출
- unmount된 경우
- 모든 자식 컴포넌트가 unmount됨
- 관련된 모든 반응형 이펙트가 중지됨
참고 : https://v3-docs.vuejs-korea.org/guide/essentials/lifecycle.html#registering-lifecycle-hooks
반응형
