[Vue 3] Composition API - Lifecycle Hook

Lifecycle Hook (생명주기 훅)

Options API와 비슷한 생명주기훅을 가지고 있습니다.

~~beforeCreate~~

~~created~~

onBeforeMount()

onMounted()

onBeforeUpdate()

onUpdated()

onBeforeUnmount()

onUnmounted()

다만 다른 점은 beforeCreate와 created 가 없습니다. 마운트 되기전에 처리되는 작업들은 setup에서 처리하면 되기 때문입니다. Options API에서 이미 다루었지만 한 번더 보겠습니다.

onBeforeMount

setup으로 인한 반응형 상태 설정 완료된 상태

DOM 노드 생성 전

onMounted()

컴포넌트가 마운트된 이후 호출

동기 자식 컴포넌트도 이미 마운트된 상태

자식 포함한 DOM 트리가 생성되어 상위에 삽입됨

렌더링된 DOM에 접근해서 특정 작업을 할 때 사용합니다.

onBeforeUpdate

반응형 상태가 변함에 따라 DOM tree를 업데이트 하기 전에 호출

여기서 DOM 접근해서 읽기 용도로 사용. 써도 반영이 되지 않음

컴포넌트 상태값을 바꾸면 DOM에 반영됨. 무한반복되지 않음

onUpdated

반응형 상태 변함에 따라 DOM tree를 업데이트한 이후 호출

자식 컴포넌트의 Update 훅 이후 실행

onBeforeUnmount

마운트 해제 전에 호출됨

마운트 해제 전이기 때문에 인스턴스의 데이터나 함수 등 모두 사용 가능

onUnmounted

컴포넌트가 마운트 해제된 이후 호출

자식 컴포넌트도 모두 마운트 해제됨

모든 반응형 데이터, computed, watch 등이 멈춤

이벤트 리스너나 서버, DB 연결 등을 수동으로 정리하는데 사용

javascript

      import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

onBeforeUpdate(() => {
	// ...
});

onUpdate(() => {
	// ...
});

onBeforeMount(() => {
	// ...
});

onMounted(() => {
  // ...
});

onBeforeUnmount(() => {
	// ...
});

onUnmounted(() => {
	// ...
});

공식 홈페이지에서는 다음과 같은 그림으로 설명하고 있습니다.