Vue의 Lifecycle Hooks

Lifecycle Hooks

🌱 Vue의 Lifecycle

라이프 사이클은 Vue 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 말한다.

라이프 사이클 훅은 라이프 사이클 단계에서 사용자가 로직을 추가할 수 있는 단계별 기능이다.

라이프 사이클을 잘 알아둬서 낄끼빠빠를 잘하도록 하자

 

 

🌱 Options API 와 Composition API 에서의 Lifecycle Hooks

Options API	Composition API (setup 함수 내부)
X	setup
beforeCreate	필요없음 (setup 함수 내에서 사용하면 된다)
created	필요없음 (setup 함수 내에서 사용하면 된다)
beforeMounted	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeunmount	onBeforeUnmount
unmounted	onUnmounted

 

 

🌱 Lifecycle Hooks 단계

creation(생성) → mounting(장착) → updating(변경) → destruction(소멸)

 

Creation(생성)

컴포넌트를 초기화하는 단계이며 가장 먼저 실행된다.

DOM에 추가되기 전이기 때문에 DOM 접근이 불가하다.

클라이언트나 서버 렌더 단에서 처리할 일은 여기서 진행

beforeCreate (options API)	컴포넌트 인스턴스 초기화 될 때 실행된다. data()나 created 전에 호출된다.
created (options API)	컴포넌트 인스턴스 초기화 완료 후 호출
setup(Composition APi)	optios API 훅들보다 먼저 호출된다.

 

Mounting(삽입)

DOM에 컴포넌트를 삽입하는 단계이다.

onBeforeMount	컴포넌트가 마운트되기 직전에 호출 (직전에 굳이 왜 호출?? 사용하지말자...)
onMounted	컴포넌트가 마운트된 후 호출 (DOM 접근 가능 + 모든 자식컴포넌트가 mounted 되었다는 것)

 

Updating(변경)

컴포넌트에서 사용되는 반응형 데이터가 변경되거나 재렌더링이 발생될때 호출된다.

onBeforeUpdate	반응형 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트하기 직전에 호출된다.
onUpdated	반응 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트한 후 호출된다. 상위 컴포넌트의 onUpdated 훅은 하위 컴포넌트의 훅 이후에 호출된다. 여기서 컴포넌트 상태를 변경하게 되면 무한 업데이트 루프가 발생할 수 있음

 

Destruction(소멸)

컴포넌트 해제 단계이다.

onBeforeUnmount	마운트 해제되기 직전에 호출된다. 해제되기 직전이라 DOM 접근 가능
onUnmounted	해체된 후에 호출된다. 해제된 후라서 DOM 접근 불가