[Vue.js] 기본 옵션과 라이프사이클
컴포지션 API - 기본 옵션과 라이프사이클
Vue.js의 컴포지션 API의 기본 옵션과 라이프사이클에 대해 살펴봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.
이전 시간까지 알아본대로 컴포지션 API는 무조건 사용을 추천하는 것은 아닙니다. 필요에 따라, 특히 코드가 복잡해지고 로직이 많이 섞여있는 컴포넌트 내부에서 기존의 방식보다 직관적으로 정리하여 코드를 최적화하는 용도로 사용할 수 있습니다.
1. 컴포지션 API 비교 예시
실제로 컴포지션 API를 사용하기 전과 사용 후의 코드를 비교하여 작성법과 활용하는 데에 있어 장점을 눈으로 보도록 합시다.
특히 지금까지 배웠던 기본 옵션과 라이프사이클을 활용하여 코드에 적용한다는 점 참고 부탁드립니다.
1.1 컴포지션 API 사용 전 코드 예시
App.vue
<template> <h1 @click="increase"> {{ count }} / {{ doubleCount }} </h1> <h1 @click="changeMessage"> {{ message }} / {{ reversedMessage }} </h1> </template>
<script> export default { data() { return { count: 0, message: 'Hello world!' } }, computed: { doubleCount() { return this.count * 2 }, reversedMessage() { return this.message.split('').reverse().join('') } }, watch: { message(newValue) { console.log(newValue) } }, created() { console.log(this.message) }, mounted() { console.log(this.count) }, methods: { increase() { this.count += 1 }, changeMessage() { this.message = 'Good?!' } } } </script>
1.2 컴포지션 API 사용 후 코드 예시
App.vue
<template> <h1 @click="increase"> {{ count }} / {{ doubleCount }} </h1> <h1 @click="changeMessage"> {{ message }} / {{ reversedMessage }} </h1> </template>
<script> import { ref, computed, watch, onMounted } from 'vue' export default { setup() { const count = ref(0) const doubleCount = computed(() => { return count.value * 2 }) function increase() { count.value += 1 } const message = ref('Hello world!') const reversedMessage = computed(() => { return message.value.split('').reverse().join('') }) watch(message, newValue => { console.log(newValue) }) function changeMessage() { message.value = "Good?!" } console.log(message.value) // 라이프사이클 훅: created() onMounted(() => { // 라이프사이클 훅: mounted() console.log(count.value) }) return { count, doubleCount, increase, message, changeMessage, reversedMessage } } } </script>
2. 라이프사이클 호출 방법
컴포지션 API 사용 시에는 라이프사이클 훅에 접두사 on
을 추가함으로서 컴포넌트의 라이프사이클 훅에 접근할 수 있습니다.
다음 표에는 setup()
내에 라이프사이클 훅이 호출되는 방법이 포함되어 있습니다.
Options API | setup 내부의 훅 |
---|---|
beforeCreate | 필요하지 않음* |
created | 필요하지 않음* |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeUnmount | onBeforeUnmount |
unmounted | onUnmounted |
errorCaptured | onErrorCaptured |
renderTracked | onRenderTracked |
renderTriggered | onRenderTriggered |
setup
은 beforeCreate
, created
라이프사이클 훅 사이에 실행되는 시점이므로beforeCreate()
가 setup()
직전에 호출되고 created()
가 setup()
직후에 호출되는 타이밍을 가짐), 명시적으로 정의할 필요가 없습니다. 다시 말해, 위 두 훅에서 작성되는 모든 코드는 setup()
내부에 직접 작성해야합니다.
Author And Source
이 문제에 관하여([Vue.js] 기본 옵션과 라이프사이클), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hanei100/Vue.js-기본-옵션과-라이프사이클저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)