Vue 3의 수명주기 메서드

소개

프로그레시브 JavaScript 프레임워크인 Vue 3은 개발자에게 동적 및 반응형 웹 애플리케이션을 구축할 수 있는 강력한 도구 세트를 제공합니다. Vue의 핵심 기능 중 하나는 개발자가 구성 요소 수명 주기의 여러 단계에 연결할 수 있도록 하는 수명 주기 방법입니다. 이러한 메소드는 Options API와 Composition API 모두에서 사용할 수 있으므로 코드 구성 방식에 유연성을 제공합니다.

이 기사에서는 Vue 3에서 사용할 수 있는 수명 주기 방법을 살펴보고, Options API와 Composition API에서의 사용법을 비교하고, 해당 애플리케이션을 설명하는 실제 예를 제공합니다.

콘텐츠

옵션 API와 컴포지션 API

Vue 3에서는 옵션 API 또는 컴포지션 API를 사용하여 수명 주기 메서드를 정의할 수 있습니다. 옵션 API는 구성 요소 옵션을 정의하는 전통적인 방법인 반면, Composition API는 보다 유연하고 모듈식 접근 방식을 제공하며 특히 복잡한 애플리케이션에 유용합니다.

수명주기 방법

다음은 Vue 구성 요소의 수명 주기 단계를 보여주는 다이어그램입니다.

만들기 전

• 옵션 API: 필요하지 않음
• Composition API: 필요하지 않음

이 후크는 구성 요소 인스턴스가 생성되기 전에 호출됩니다.

생성됨

• 옵션 API: 필요하지 않음
• Composition API: 필요하지 않음

이 후크는 구성 요소 인스턴스가 생성된 후 호출됩니다.

beforeMount

• 옵션 API: beforeMount
• 컴포지션 API: onBeforeMount

이 후크는 컴포넌트가 DOM에 마운트되기 직전에 호출됩니다.

예:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

탑재

• 옵션 API: 마운트됨
• 컴포지션 API: onMounted

이 후크는 컴포넌트가 DOM에 마운트될 때 호출됩니다.

예:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

업데이트 전

• 옵션 API: beforeUpdate
• 컴포지션 API: onBeforeUpdate

이 후크는 구성 요소 업데이트 전에 호출됩니다.

예:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

업데이트됨

• 옵션 API: 업데이트됨
• 컴포지션 API: onUpdated

이 후크는 구성 요소 업데이트 후에 호출됩니다.

예:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

마운트 해제 전

• 옵션 API: beforeUnmount
• 컴포지션 API: onBeforeUnmount

이 후크는 구성요소가 마운트 해제되기 직전에 호출됩니다.

예:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

말 타지 않은

• 옵션 API: 마운트 해제됨
• 컴포지션 API: onUnmounted

이 후크는 구성요소가 마운트 해제된 후에 호출됩니다.

예:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

오류가 캡처되었습니다.

• 옵션 API: 오류 캡처됨
• 컴포지션 API: onErrorCaptured

이 후크는 하위 구성 요소에서 오류가 캡처될 때 호출됩니다.

예:

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

렌더링 추적됨

• 옵션 API: renderTracked
• 컴포지션 API: onRenderTracked

이 후크는 렌더링 중에 반응형 종속성을 추적할 때 호출됩니다.

예:

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

렌더링 트리거됨

• 옵션 API: renderTriggered
• 컴포지션 API: onRenderTriggered

이 후크는 반응적 종속성이 렌더링을 트리거할 때 호출됩니다.

예:

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

요약

Vue 3의 수명 주기 방법을 이해하고 활용하는 것은 구성 요소 수명 주기의 다양한 단계를 관리하는 데 중요합니다. Options API를 선호하든 Composition API를 선호하든 Vue 3는 구성 요소의 동작을 효과적으로 제어하는 ​​데 도움이 되는 포괄적인 후크 세트를 제공합니다. 이러한 수명 주기 방법을 익히면 더욱 효율적이고 유지 관리가 쉬운 Vue 애플리케이션을 만들 수 있습니다.

즐거운 코딩하세요! ?

궁금한 점이 있으시면 언제든지 문의해주세요!

내 게시물이 마음에 드셨다면 다음에서 후원해 주세요.

위 내용은 Vue 3의 수명주기 메서드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!