Composistion API 변경
OptionsAPI vs CompositionAPI
공통점
Vue에서 컴포넌트의 생성과 관리를 위한 다양한 기능(반응형 데이터, 메소드, 라이프 사이클 훅 등)을 제공하는 API이다.
OptionsAPI
기능을 객체의 속성(Option) 형태로 제공
코드의 구조가 명확하여, 어떤 역할을 하는지 파악하기 쉬움
한가지 로직의 코드가 파일 곳곳에 분할 되어 있음
CompositionAPI
setup 함수와 함께 사용되며 기능을 함수 형태로 제공
TypeScript에 친화적이며, 코드 재사용이 용이함
한가지 로직의 코드를 파일 한 곳에 그룹화 할 수 있음
OptionsAPI to Composition API
1. export default { }
OptionsAPI
<script>
export default {
}
</script>
CompositionAPI
<script setup>
</script>
2. Components
OptionsAPI
import SampleComponent from '@/components'
<script>
export default {
components: {
SampleComponent
}
}
</script>
CompositionAPI
import SampleComponent from '@/components'
<script setup>
</script>
3. Props
OptionsAPI
import SampleComponent from '@/components'
<script>
export default {
props: {
visible: Boolean,
isUpdated: Boolean
}
}
</script>
CompositionAPI
import SampleComponent from '@/components'
<script setup>
const { visible, isUpdated } = defineProps({
visible: Boolean,
isUpdated: Boolean
})
</script>
4. Event emitters
OptionsAPI
<script>
export default {
emits: ['sampleEvent'],
methods: {
sampleMethod() {
}
}
}
</script>
CompositionAPI
<script setup>
const emit = defineEmits(['sampleEvent'])
</script>
5. Data
OptionsAPI
<script>
export default {
data() {
return {
data: 'sample'
}
}
}
</script>
CompositionAPI
<script setup>
const data = ref('sample')
</script>
6. Methods
OptionsAPI
<script>
export default {
methods: {
sampleMethod(params) {
// logic
}
}
}
</script>
CompositionAPI
<script setup>
function sampleMethod(params) {
// logic
}
</script>
7. Computed
OptionsAPI
<script>
export default {
computed: {
sampleData() {
return sampleItems.value.reduce((total, item)) => {
return total + (item.price * item.quantity)
}
}
}
}
</script>
CompositionAPI
<script setup>
const sampleData = computed(() => {
return sampleItems.value.reduce((total, item)) => {
return total + (item.price * item.quantity)
}
})
</script>
8. Watch
OptionsAPI
<script>
export default {
watch: {
sampleData(data) {
// logic
}
}
}
</script>
CompositionAPI
<script setup>
watch(sampleData, () => {
// logic
})
</script>
9. Created
OptionsAPI
<script>
export default {
created() {
// logic
}
}
</script>
CompositionAPI
<script setup>
// logic
</script>
10. OnMounted
OptionsAPI
<script>
export default {
mounted() {
// logic
}
}
</script>
CompositionAPI
<script setup>
onMounted(() => {
// logic
})
</script>
11. 글로벌 인스턴스 속성
라우터나 기타 플러그인으로 주입된 전역 인스턴스 속성
OptionsAPI CompositionAPI
this.$route ----> const route = useRoute()
this.$router ----> const router = useRouter()
this.$t ----> const { t } = useI18n()
this.$toast ----> const toast = useToast()
12. refs 템플릿 참조
OptionsAPI
<template>
<input ref="input">
</template>
<script>
export default {
mounted() {
this.$refs.input.focus()
}
}
</script>
CompositionAPI
<template>
<input ref="input">
</template>
<script setup>
const input = ref(null)
onMounted(() => {
input.value.focus()
})
</script>
※ 유의사항
1. 변수명 중복
OptionsAPI에서는 data, props, methods 등 각 속성에 선언한 항목에 접근할 때 this.항목명으로 접근하지만, CompositionAPI에서는 항목명 그대로 접근 하기 때문에 변수명이 중복되지 않아야 한다.
=> 함수의 인자, 지역변수가 props, data 속성에 선언한 변수명과 일치하지 않도록 수정
OptionsAPI
<script>
export default {
props: {
visible: Boolean,
},
data() {
return {
data: 'sample'
}
},
methods: {
sampleMethod(data, visible) {
this.data = data
this.visible = visible
}
}
}
</script>
CompositionAPI
<script setup>
const { visible } = defineProps({ visible: Boolean })
const data = ref('sample')
function sampleMethod(params1, params2) {
data.value = params1
visible = params2
}
</script>
2. 변수 & 함수 접근 방식 차이
OptionsAPI CompositionAPI
[data]
this.변수명 ----> 변수명.value
[props]
this.변수명 ----> 변수명
[methods]
this.함수명() ----> 함수명()
3. 전역 함수 접근 방식 차이
OptionsAPI
<template>
<Calendar
:max-date="getDate(date)"
/>
</template>
<script>
// import { getDate } from '../Utils'
export default {
methods: {
getDate(date) {
return getDate(date)
}
}
}
</script>
CompositionAPI
<template>
<Calendar
:max-date="getDate(date)"
/>
</template>
<script setup>
</script>
Last modified: 19 11월 2024